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

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索引。

.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标签设置为前面，然后将所有内容设置为更远的后背