title: css menu with dropdown li width
body: <p>when I set the "width" attribute of the .topMenu li, the .subMenu width is too narrow, even though I set it's position to absolute. It also is horizontal instead of vertical. Why?</p>
  
  <p>the html</p>
  
  <pre><code>    &lt;div id="navigation"&gt;
              &lt;ul id="navBlock"&gt;
                  &lt;li&gt;HOME&lt;/li&gt;
                  &lt;li class="topMenu"&gt;
                      ABOUT US
                      &lt;ul class="subMenu"&gt;
                          &lt;li&gt;WELCOME&lt;/li&gt;
                          &lt;li&gt;HISTORY&lt;/li&gt;
                      &lt;/ul&gt;   
                  &lt;/li&gt;
           &lt;/ul&gt;      
      &lt;/div&gt;
  </code></pre>
  
  <p>the css</p>
  
  <pre><code>#navBlock{
       margin: 0;
       padding: 0;    
       list-style-type: none;  
  }
  #navBlock li{ 
      display: inline-block; 
      border:1pt solid #ccc;
      width:20%;
      text-align:center;
      background:#fff;
      position:relative;
  }
  #navBlock li:hover{ 
      cursor:pointer;
      background:orange;  
  }
  .topMenu:hover .subMenu{
      display:block;      
      position:absolute;
  }   
  .subMenu{
      display:none;
      margin: 0;
      padding: 0;             
  }
  .subMenu li{
      border:1pt solid #aaa;
      background:#fff;        
      width:200px;        
      display: inline; 
      position:absolute;
  }
  .subMenu li:hover{
      float:none;
  }   
  </code></pre>
  
  <p><a href="http://jsfiddle.net/L28Lf3se/" rel="nofollow">http://jsfiddle.net/L28Lf3se/</a></p>