垂直菜单 子菜单 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