title: Dropdown Menu CSS
body: <p>I cannot figure out what is wrong with my dropdown menu. When I over over the main level link, the drop down appear but at the left of my screen instead of underneath the main link.
  I have been on this for a couple of hours and any help would be greatly appreciated. </p>
  
  <p>Here is the html part :</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="nav"&gt;
  
          &lt;ul id="menu"&gt;
             &lt;li&gt;&lt;a href="#" class="current"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Apetiziers&lt;/a&gt;
                &lt;ul&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Sub-Link 1&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Sub-Link 2&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Sub-Link 3&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#"&gt;Sub-Link 4&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;/li&gt;
  
                &lt;li&gt;&lt;a href="#"&gt;Entree&lt;/a&gt;
               &lt;ul&gt;
               &lt;li&gt;&lt;a href="#"&gt;Sub-Link 1&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Sub-Link 2&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Sub-Link 3&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Sub-Link 4&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;
                &lt;/li&gt;
  
                &lt;li&gt;&lt;a href="#"&gt;Main Course&lt;/a&gt;
               &lt;ul&gt;
               &lt;li&gt;&lt;a href="#"&gt;Sub-Link 1&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Sub-Link 2&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Sub-Link 3&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Sub-Link 4&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;      
                &lt;/li&gt;
  
                &lt;li&gt;&lt;a href="#"&gt;Dessert&lt;/a&gt;
               &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub-Link 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub-Link 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub-Link 3&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sub-Link 4&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;      
                &lt;/li&gt;
  
  
                &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
   &lt;/div&gt;
  </code></pre>
  
  <p>And the .css :</p>
  
  <pre class="lang-css prettyprint-override"><code>ul#menu {
     float: left;
    margin: 0;
    width: auto;
      padding: 0px 40px 0px;
      background: #333; color: #fff;
      line-height: 100%;
  }
  
  ul#menu li {
    display: inline; 
  }
  
  
  /* top level link */
  ul#menu a {
    float: left;
    padding: 10px 16px;
    margin-right: 0px;
    background: #789; color: #fff;
    text-decoration: none;
    border-right: 1px solid #e2e2e2;
  }
  
  /* main level link hover */
  ul#menu a.current {
    background: #f60; color: #fff;
  }
  
  
  ul#menu li:hover &gt; a {
    color: #fff; background: #ff4500;
    text-decoration: underline;
  }
  
  /* dropdown */
  ul#menu li:hover &gt; ul {
      display: block; /* shows the sub-menu (child ul of li) on hover */
  }
  
  /* sub level list */
  ul#menu ul {
      display: none; /* hides the sub-menu until you hover over it */
      margin: 0;
      padding: 0;
      width: 140px;
      position: absolute;
      top: 35px;
      left: 0;
      background: #000;
      border: solid 1px #ccc;
  }
  
  ul#menu ul li {
      float: none;
      margin: 0;
      padding: 0;
  }
  
  ul#menu ul a {
      font-weight: normal;
      background: #9BB3BF; color: #036;
  }
  
  /* sub levels link hover */
  ul#menu ul li a:hover {
  color: #036; background: #DDDF99;
  }
  </code></pre>