0

我修改了一些我发现的现有 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;
}

有人能告诉我缺少什么以使下拉菜单保持在顶部吗？

谢谢。

4

4 回答 4

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;
}
于 2012-08-08T01:55:33.033 回答
1

使用 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

于 2012-08-08T01:55:35.413 回答
1

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

于 2012-08-08T01:57:00.163 回答
1

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

有关更多信息：请参阅此处的 z-index 属性信息： https ://bytutorial.com/tutorials/css/css-z-index

于 2012-08-08T01:59:39.293 回答