Question

我修改了一些现有的CSS代码，用于开发菜单。这一切都很好，除非我点击下拉菜单。如果页面上有另一个HTML组件，则菜单会保留在组件后面而不是保持在最顶层（我希望我的描述有意义）。

这是CSS：

#navMenu{
    /*font-family: 'Tenor sans', Calibri, Times, Times, serif;*/
    margin-left:2px;
    /*width: 944px;*/
    width:100%;
    font-weight:normal;
    font-size:15px;
}

#navMenu ul{
    margin:0;
    padding:0;
    line-height:30px;
}

#navMenu li {
    margin:0;
    padding:0;
    /*removes the bullet point*/
    list-style:none;
    float:left;
    position:relative;
    background-color:  #F9F9F9;
}

/*for top level */
#navMenu ul li a{
    text-align:center;
    font-weight:bold;
    font-size:0.8em;
    line-height:height;
    font-family:Arial,Helvetica,sans-serif;
    text-decoration:none; /*remove underline*/

    margin:-1px;
    /*height width for all links*/
    height:30px;
    width:150px;
    display:block;
    /*border-bottom: 1px solid #ccc;*/
    color: #00611C;
}

/* hiding inner ul*/
#navMenu ul ul{
    position:absolute;
    visibility:hidden;
    /*must match height of ul li a*/
    top:28px;
}

/*selecting top menu to display the submenu*/
#navMenu ul li:hover ul{
    visibility:visible;
}

#navMenu li:hover {
    /*background-color: #F9F9F9;*/
    background-color: #DBDB70;  
    border-radius: 5px;
}

#navMenu ul li:hover ul li a:hover{    
   /* color: E2144A;*/
   color:#E2144A;
}
#navMenu ul li a:hover{
    /*color: E2144A;*/
    color:#E2144A;
}

是否有人能够告诉我最新消息，以便让下拉菜单保持最佳状态？

感谢。

Answer 1

使用z-index。

#navMenu{
    /*font-family: 'Tenor sans', Calibri, Times, Times, serif;*/
    margin-left:2px;
    /*width: 944px;*/
    width:100%;
    font-weight:normal;
    font-size:15px;
    z-index:1;
}

Answer 2

使用HTML代码而不仅仅是CSS来解决这个问题会很有用。但是只使用你发布的CSS，就可以看看在你想要的方式向后分层的元素上设置一个z-index。

http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index?redirectlocale=en-US&redirectslug=Understanding_CSS_z-index

Answer 3

尝试给你的菜单一个z-index：1; （或更高）。您还可以降低覆盖菜单的任何内容的z-index。

Answer 4

您需要设置将菜单包装在适当位置的父级：相对，这可以是正文或外部包装。然后你可以使用绝对位置将它始终放在顶部并指定一些z-index：

有关更多信息：请在此处查看此z-index属性信息： https://bytutorial.com/tutorials/css/css-z-index

如何让CSS菜单保持领先

4 个答案: