title: Horizontal navigation sub menu alignment CSS
body: <p><a href="http://i.stack.imgur.com/OP0kc.jpg" rel="nofollow">http://i.stack.imgur.com/OP0kc.jpg</a></p>
  
  <p>the navigation menu i have created using the CSS and Html code is not working correctly.
  The alignment of the navigation menu is not perfect i want in this way :  <a href="http://i.stack.imgur.com/h4oPK.jpg" rel="nofollow">http://i.stack.imgur.com/h4oPK.jpg</a> 
  I want to convert this to CSS..</p>
  
  <p>Please help</p>
  
  <pre><code>        &lt;style&gt;
      /* Targeting both first and second level menus */
  
  #nav li {
      list-style:none;
      float: left;
      position: relative;
  }
  #nav li a {
      display: block;
      padding: 8px 12px;
      text-decoration: none;
  }
  #nav li a:hover {
  
      background-color:red;
      color:#FFF;
      opacity:1;
  }
  
  /* Targeting the first level menu */
  #nav {  
      top:150px;
      min-width:850px;
      background:#fff;
      opacity:0.5;
      display: block;
      height: 34px;
      z-index: 100;
      position: absolute;
  }
  #nav &gt; li &gt; a {
  }
  
  /* Targeting the second level menu */
  #nav li ul {
      color: #333;
      display: none;
      position: absolute; 
      width:850px;
  }
  #nav li ul li {
      display: inline;
  }
  #nav li ul li a {
      background: #fff;
      border: none;
      line-height: 34px;
      margin: 0;
      padding: 0 8px 0 10px;
  }
  #nav li ul li a:hover {
      background-color:red;
      color:#FFF;
      opacity:1;
  }
  
  /* Third level menu */
  #nav li ul li ul{
      top: 0;
  }
  ul.child {
  background-color:#FFF;  
  }
  /* A class of current will be added via jQuery */
  #nav li.current &gt; a {
      background: #f7f7f7;
      float:left;
  }
  /* CSS fallback */
  #nav li:hover &gt; ul.child {
      left:0;
      top:34px;
      display:inline;
      position:absolute;
      text-align:left;
  }
  #nav li:hover &gt; ul.grandchild  {
      display:block;
  }
      &lt;/style&gt;
      &lt;ul id="nav"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Products&lt;/a&gt;
          &lt;ul class="child"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Hard Drives&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Monitors&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Speakers&lt;/a&gt;
                  &lt;ul class="child"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;10 watt&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;20 watt&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;30 watt&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Random Equipment&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Services&lt;/a&gt;
          &lt;ul class="child"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Repairs&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Installations&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Setups&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>