css - z索引不适用于导航栏

我有一个下拉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; ?>;
}

最佳答案

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

在您的ul上使用overflow: hidden可以防止ul以外的任何内容出现。

关于css - z索引不适用于导航栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20198897/