Подменю вертикального меню CSS-выравнивание

Question

У меня есть вертикальное меню и вам нужно подменю, чтобы выскочить. У меня все работает, кроме моего подменю не выравнивается, где он должен горизонтально. Вместо этого он перескакивает вверх над заголовком div выше. Любая помощь будет оценена по достоинству.

HTML

<div class="leftcontainer"> 
<ul> 
    <li><a class="current" href="index.html">Home</a></li> 
    <li><a href="#">History</a></li> 
</ul> 
<div class="spacer"></div> 
<ul> 
<li><a href="#">Packaging</a> 
    <ul> 
     <li><a href="#">Item</a></li> 
     <li><a href="#">Item</a></li> 
     <li><a href="#">Item</a></li> 
    </ul> 
</li> 
<li><a href="#">Transportation</a> 
     <ul> 
     <li><a href="#">Item</a></li> 
     <li><a href="#">Item</a></li> 
     <li><a href="#">Item</a></li> 
    </ul> 
</li> 
<li><a href="#">Warehousing</a></li> 
<li><a href="#">Design</a></li> 
<li><a href="#">Real Estate</a></li> 
<li><a href="#">Contact Us</a></li> 

</ul> 

CSS

.container { 
      width: 960px; 
      height:740px; 
      margin-top: 0px; 
      margin-right: auto; 
      margin-bottom: 0px; 
      margin-left: auto; 
      padding-bottom: 10px; 
      position: relative; 
      overflow: auto; 
      box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.15); 
     } 

     body { 
      font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; 
      background-image: url(../img/body-bg); 
      background-repeat: repeat-x; 
     } 

     .leftcontainer { 
      float: left; 
      width: 160px; 
      height: 650px; 
      display: inline-block; 
      background-image: url(../img/nav-div-bg.png); 
      background-repeat: repeat-y; 
      margin-bottom: 0px; 
      clear: both; 
      position: absolute; 
      z-index: 999; 
     } 

     ul li { 
      text-decoration: none; 
      list-style-type: none; 
      margin-left: -40px; 
      text-align: left; 
      display: block; 
     } 

     ul { 
      margin-top:0px; 
      margin-bottom: 0px; 
      list-style-type: none; 
     } 

     ul li a:link { 
      text-decoration: none; 
      list-style-type: none; 
      color: #FFF; 
      display: block; 
      padding-top: 20px; 
      padding-bottom: 20px; 
      padding-left: 20px; 
      font-size: 16px; 
     } 

     ul li a:hover { 
      text-decoration: none; 
      list-style-type: none; 
      color: #FFF; 
      padding-left: 20px; 
      display: block; 
      padding-top: 20px; 
      padding-bottom: 20px; 
      background-image: url(../img/nav-bg.png); 
      background-repeat: no-repeat; 
      background-position: left center; 
      box-shadow: -30px 0px 9px 0px rgba(0,0,0,0.15); 
     } 

     .container ul li a:visited { 
      text-decoration: none; 
      list-style-type: none; 
      color: #FFF; 
      padding-left: 20px; 
      display: block; 
      padding-top: 20px; 
      padding-bottom: 20px; 
     } 

     ul li ul { 
      position: absolute; 
      display: none; 
      background: #5f6975; 
      border-radius: 0px; 
      padding-top: 0; 
      padding-right: 0; 
      padding-bottom: 0; 
      padding-left: 0; 
     } 

     ul li:hover ul { 
      display: inline-block; 
      z-index: -1; 
      left: 172px; 
      top: 0px; 
     } 

     ul ul li { 
      background: #5f6975; 
      float: none; 
      padding-left: 0px; 
      border-top: 1px solid #6b727c; 
      border-bottom: 1px solid #575f6a; 
     } 

     ul ul li a:link{ 
      padding: 10px 0px 10px 30px; 
      color: #fff; 
      width: 130px; 
     } 

     ul ul li a:hover { 
      background: #4b545f; 
      box-shadow: none; 
     } 

     .current{ 
      text-decoration: none; 
      list-style-type: none; 
      color: #FFF; 
      padding-left: 20px; 
      display: block; 
      padding-top: 20px; 
      padding-bottom: 20px; 
      background-image: url(../img/nav-bg.png); 
      background-repeat: no-repeat; 
      background-position: left center; 
      box-shadow: -30px 0px 9px 0px rgba(0,0,0,0.15); 
     } 

Answer 1

вложенное меню должны быть расположены абсолют. И для правильной работы позиционирования вам нужно будет поместить родителя li, поэтому он действует как ссылка для абсолютного позиционированного дочернего элемента.

Минимальный CSS будет выглядеть примерно так:

nav ul { 
    float: left; 
} 
nav ul ul { 
    display: none; 
} 
nav ul li { 
    position: relative; 
} 
nav ul li:hover > ul { 
    position: absolute; 
    display: block; 
    top: 0; 
    left: 100%; 
} 

и скрипку: http://jsfiddle.net/Bp48q/

Заметьте, что этот код позволит сохранить вложенности подменю (который будет УБ кошмар, но это совсем другая история) и должен работать нормально.

Answer 2

Вы должны добавить position: relative; к родителю <li>.

Answer 3

изменение ul li ul к position: relative;, а не position: absolute;

This should do the trick