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 index。

.veryImportant
{
z-index: 500;
}

.notImportant
{
z-index: 1;
}

所以让我们试试

li
{
z-index: 999;
}

Answer 2

我在 html

中做了一些改动

[fiddle 例子][1]

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

Answer 3

在您的 css 中使用 z-index 属性

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

使用它只需将 li 标签设置在前面，然后将所有内容设置得更靠后一些

CSS 顶部的菜单下拉列表

CSS Menu dropdown list on the top of everything

html

css

drop-down-menu