title: CSS: Menu Dropdown showing horizontally when I need vertical
body: <p>I am working on a navigational menu. I have a problem with the dropdown submenus. When I hover over the submenu, it shows the entries horizontally, but I want it vertically. Can someone please show me what I can do to fix it? Thanks.</p>
  
  <p>Here's a <a href="http://jsfiddle.net/Gp9rr/" rel="nofollow">fiddle</a>.</p>
  
  <p>Here is my CSS code:</p>
  
  <pre><code>#nav                            {overflow:hidden;
                                   margin:0px auto;
                                   text-align:center;}
  
  #nav ul li                      {display:inline-block;
                                   list-style:none;
                                   vertical-align:top;
                                   width:100px;}
  
  #nav&gt;ul&gt;li&gt;a&gt;img                {text-align:center;
                                   width:100px;
                                   height:100px;}
  
  #nav a                          {text-decoration:none !important;}
  
  #nav a:hover                    {text-decoration:underline !important;}
  
  #nav &gt; ul &gt; li &gt; ul             {display:none;
                                   z-index:999;
                                   position:absolute;}
  
  #nav li:hover ul                {display:block;}
  
  .submenu li                     {border-bottom:solid 1px #333333;
                                   font-size:12px;}
  
  .submenu img                    {display:inline;
                                   vertical-align:middle;
                                   width:25px;
                                   height:25px;
                                   float:left;
                                   margin:5%}
  
  .submenu li:hover               {background-color:#CCC;}
  </code></pre>
  
  <p>Here is my HTML Code:</p>
  
  <pre><code>&lt;div id="nav"&gt;
      &lt;ul&gt;
              &lt;li&gt;
              &lt;a href=""&gt;
                  &lt;img src="images/placeholder.png"&gt;
                  Home
              &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
              &lt;a href=""&gt;
                  &lt;img src="images/placeholder.png"&gt;
                  Menu w/ Submenu
              &lt;/a&gt;
        &lt;ul class="submenu"&gt;
                  &lt;li&gt;
                  &lt;a href=""&gt;
                  &lt;img src="images/placeholder.png"&gt;
                  Submenu Item
                  &lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                  &lt;a href=""&gt;
                  &lt;img src="images/placeholder.png"&gt;
                  Submenu Item
                  &lt;/a&gt;
                  &lt;/li&gt;
  
              &lt;/ul&gt;
              &lt;/li&gt;
  
              &lt;li&gt;
              &lt;a href=""&gt;
                  &lt;img src="images/placeholder.png"&gt;
                  Menu Item
              &lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li&gt;
              &lt;a href=""&gt;
                  &lt;img src="images/placeholder.png"&gt;
                  Menu Item
              &lt;/a&gt;
              &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>