Nie mogę zrozumieć, co jest nie tak z moim menu rozwijanym. Kiedy przejdę nad linkiem głównego poziomu, lista rozwijana pojawia się, ale po lewej stronie ekranu zamiast pod głównym linkiem. Jestem na tym od kilku godzin i każda pomoc byłaby bardzo mile widziana.

Oto część html:

<div class="nav">

        <ul id="menu">
           <li><a href="#" class="current">Home</a></li>
              <li><a href="#">Apetiziers</a>
              <ul>
               <li><a href="#">Sub-Link 1</a></li>
               <li><a href="#">Sub-Link 2</a></li>
               <li><a href="#">Sub-Link 3</a></li>
               <li><a href="#">Sub-Link 4</a></li>
              </ul>
              </li>

              <li><a href="#">Entree</a>
             <ul>
             <li><a href="#">Sub-Link 1</a></li>
             <li><a href="#">Sub-Link 2</a></li>
             <li><a href="#">Sub-Link 3</a></li>
             <li><a href="#">Sub-Link 4</a></li>
             </ul>
              </li>

              <li><a href="#">Main Course</a>
             <ul>
             <li><a href="#">Sub-Link 1</a></li>
             <li><a href="#">Sub-Link 2</a></li>
             <li><a href="#">Sub-Link 3</a></li>
             <li><a href="#">Sub-Link 4</a></li>
             </ul>      
              </li>

              <li><a href="#">Dessert</a>
             <ul>
              <li><a href="#">Sub-Link 1</a></li>
              <li><a href="#">Sub-Link 2</a></li>
              <li><a href="#">Sub-Link 3</a></li>
              <li><a href="#">Sub-Link 4</a></li>
             </ul>      
              </li>


              <li><a href="#">Contact Us</a></li>
        </ul>

 </div>

I .css:

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 > a {
  color: #fff; background: #ff4500;
  text-decoration: underline;
}

/* dropdown */
ul#menu li:hover > 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;
}