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以外的任何事情出现。

z-index不适用于导航栏

1 个答案: