如何使CSS菜单排在最前面

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

Answer 4

您需要将将包裹菜单的父项设置在适当的位置：相对的，这可以是主体，也可以是外包装。 然后，您可以使用绝对位置将其始终放置在顶部并指定一些z-index：

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