title: Sub-menu items not placed correctly
body: <p>I want the menu subitems to appear just under the menu items. As it is now, they are a bit to right.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>ul#menu {
      float:left;
      width:100%;
      margin:0;
      padding:0;
      list-style-type:none;
      background-color:#D60024;
  }
  
  ul#menu &gt; li {
      float:left;
      display:inline;
      position:relative;
      padding:3px;
      border:1px #8a0505 solid;
      background-color:#D60024;
      color:white;
  }
  
  ul#menu &gt; li:hover {
      background:#8a0505;
      color:white;
  }
  
  ul#menu &gt; li:hover ul {
      opacity:1;
      left:0;
      height:auto;
  }
  
  ul#menu li ul {
      position:absolute;
      float:left;
      width:100px;
      height:0;
      padding: 5px;
      margin:0;
      opacity:0;
  }
  
  ul#menu ul li {
      background-color:#D60024;
      border:1px #8a0505 solid;
  }
  
  ul#menu ul li:hover {
      background:#8a0505;
      border:1px #8a0505 solid;
      color:white;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/sTQLh/1/" rel="nofollow">JSFiddle</a></p>