css - z-index 不适用于导航栏

Question

我有一个下拉 CSS 菜单。下拉<div>应该从页面上方开始，在我的固定导航栏后面，当导航按钮“悬停”时。它使用 CSS 转换将子菜单向下移动到页面中，使其可见。

问题是.. 它一直在我的导航栏上方呈现子菜单(根据 z-index)。我需要它在导航栏后面呈现。

Click here to see the webpage(该页面暂时有意向左对齐 - 忽略此)

HTML 的布局如下:

<div id="nav">
  <ul>
    <li><a href="/">Title 1</a></li> <!-- has no submenu -->
    <li><a href="/">Title 2</a>
      <div>
        <!-- Submenu Content -->
      </div>
    </li>
  </ul>
</div>

这是我的 CSS:

#nav {
    position:absolute;
    width:<?php echo ($navbutwidth*$numititles)+($numititles-1); ?>px;
    background-color:<?php echo $colnavbg; ?>;
    z-index:5 !important;
}
#nav ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    width:<?php echo $navbarwidth; ?>px;
    z-index:3 !important;
}
#nav ul li {
    float:left;
}   
#nav ul li > a {
    width:<?php echo ($navbutwidth-16); ?>px;
    height:<?php echo $navbutheight; ?>px;
    line-height:<?php echo $navbutheight; ?>px;
    display:block;
    text-decoration:none;
    border-left:1px Solid <?php echo $colnavbutborder; ?>;
    padding-left:15px;
    background-color:<?php echo $colnavbutbg; ?>;
    color:<?php echo $colnavbuttxt; ?>;
    border-radius:10px 10px 0px 0px;
}   
#nav ul li > a:hover {
    background-color:<?php echo $colnavbutbghov; ?>;
    color:<?php echo $colnavbuttxthov; ?>;
}   
#nav ul li > div {
    position:absolute;
    top:-<?php echo $navsubbutheight-$navbutheight; ?>px;
    left:0px;
    width:<?php echo $navsubbutwidth; ?>px;
    height:<?php echo $navsubbutheight-1; ?>px;
    text-align:left;
    display:block;
    padding:0;
    background-color:<?php echo $colsubnavbutbg; ?>;
    border-top:1px Solid #FFF;
    border-bottom:1px Solid #FFF;
    z-index:1 !important;
    -webkit-transition:all 0.2s ease-in-out;
    -ms-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}   
#nav ul li:hover > div {
    top:<?php echo $navbutheight; ?>px;
    display:block;
}
#nav ul li > div:hover {
    background-color:<?php echo $colnavbutbghov; ?>;        
}

Answer 1

添加position:relative； z-index: 1000; 到 .a1.

在您的 ul 上设置 overflow: hidden 将阻止 ul 之外的任何内容出现。