html - 如何使 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

拥有 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