Css z索引不适用于导航栏

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

问题是。。它一直呈现我的导航栏上方的子菜单（以z索引表示）。我需要它在导航栏后面渲染

（目前页面有意向左对齐-忽略此项）

以下是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; ?>;        
}

#导航{
位置：绝对位置；
宽度：px；
背景色：；
z指数：5！重要；
}
#导航ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
宽度：px；
z指数：3！重要；
}
#李国荣{
浮动：左；
}   
#导航ulli>a{
宽度：px；
高度：px；
线高：px；
显示：块；
文字装饰：无；
左边框：1px实心；
左侧填充：15px；
背景色：；
颜色：；
边界半径：10px 10px 0px 0px；
}   
#导航ulli>a：悬停{
背景色：；
颜色：；
}   
#导航ulli>div{
位置：绝对位置；
顶部：-px；
左：0px；
宽度：px；
高度：px；
文本对齐：左对齐；
显示：块；
填充：0；
背景色：；
边框顶部：1px实心#FFF；
边框底部：1px实心#FFF；
z指数：1！重要；
-webkit转换：所有0.2秒易入易出；
-ms转换：所有0.2秒缓进缓出；
过渡：所有0.2秒缓进缓出；
}   
#导航ulli：悬停>俯仰{
顶部：px；
显示：块；
}
#导航ulli>div:悬停{
背景色：；
}

添加

位置：相对；z指数：1000至
.a1

有
溢出：在您的ul上隐藏
将阻止该ul之外的任何内容出现。
直接删除
无效对不起。。该div应该包装在
标记中。我将编辑OPHOW？如果你遵循链接，那一点工作得非常好。当您将鼠标悬停在
上时，它会将菜单下拉，当您将鼠标悬停在
上时，它会更改背景颜色。好的，这样做很有效。由于圆角，部分区域仍在显示中。。这有点烦人。什么是相对定位使z索引起作用的？。。另外，它仍然加载在内容部分的后面。。它没有在页面后面加载。它根本不在那里渲染。一旦它低于固定标题中的最低点，它就会消失。为了使z-索引正常工作，必须满足两个条件。每个元素都必须有位置，不管它是相对的还是绝对的都无关紧要。其次，这两个元素必须处于同一级别，或者是同级。您的ul上有
overflow:hidden
。