Question

我在CSS中有菜单列表的代码

<style>
#primary_nav_wrap
{
    margin-top:15px
}

#primary_nav_wrap ul
{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0;
    background-color: #15497C;
    background: -webkit-linear-gradient(top, #15497C, #2384D3); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, rgba(0, 0, 0,1), rgba(0, 0, 0, 0.6)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, #15497C, #1B63A3); /* For Firefox 3.6 to 15 */
    background: linear-gradient(top, #15497C, #2384D3); /* Standard syntax (must be last) */
}

#primary_nav_wrap ul a
{
    display:block;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    line-height:32px;
    padding:0 15px;
    font-family:Verdana;

}

#primary_nav_wrap ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
    background:#040F25
}

#primary_nav_wrap ul li:hover
{
    background:#040F25
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:##15497C;
    padding:0;
    z-index:1000px;
}

#primary_nav_wrap ul ul li
{
    float:none;
    width:200px;
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
    top:0;
    left:100%
}

#primary_nav_wrap ul li:hover > ul
{
    display:block
}
    </style>

此CSS代码用于制作包含下拉选项的菜单。示例HTML代码是

<nav id="aadd">
<ul>
  <li><a href="home.aspx">Home</a></li>
  <li><a href="#">44556677</a>
    <ul>

                        <li><a href="">abcd</a></li>
                        <li><a href="">defg</a></li>
                        <li><a href="">hijk</a></li>
                        <li><a href="">lmno</a></li>               
                        <li><a href="">pqrs</a></li>

   </ul>
  </li>
</ul>
</nav>

但问题是，如果页面中存在不应发生的图像或按钮，则下拉选项会落后。菜单中的下拉列表应位于所有内容的顶部。怎么会发生？

Answer 1

如果您想优先处理图层（例如li），请在css元素上使用Z index。

.veryImportant
{
z-index: 500;
}

.notImportant
{
z-index: 1;
}

所以，试试吧

li
{
z-index: 999;
}

Answer 2

我在html中做了一些改动

[小提琴示例] [1]

  [1]: https://jsfiddle.net/mike_manish/3gypn7c0/

Answer 3

你的css中的

使用z-index属性

.frontitem{
z-index: 300;
}
.backtitem{
z-index: 10;
}

使用它只需将你的li标签设置在前面并将所有内容设置得更远

CSS菜单下拉列表位于所有内容的顶部

3 个答案: