세로 메뉴 하위 메뉴 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

position: absolute;보다 하위 메뉴의 절대 위치한다. 그리고 위치 지정이 올바로 작동하려면 부모 위치를 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/

참고 중첩 하위 메뉴의 (A UX의 악몽이 될 것이다, 그러나 그것은 다른 이야기입니다) 잘 작동해야합니다.

Answer 2

당신은 부모 <li>에 position: relative;을 추가해야합니다. position: relative;에

Answer 3

변화 ul li ul 오히려 This should do the trick