html - CSS 菜单下拉菜单显示在内容后面

Question

我正在研究 http://www.comehike.com (现在只是一个沙盒)，您可以看到，如果将鼠标悬停在“远足”导航项上，下拉菜单似乎位于页面内容的后面。

我看到了很多关于类似问题的帖子，但这些都不是我需要的。

为了以防万一，这是我的 CSS:

html 
{
    margin-bottom:2px;
    min-height:100%;
}

body 
{
    background-image:url('http://www.comehike.com/img/ui/grass.jpg');
}

#navigation
{
    width:100%;
    height:30px;
    background-color:#white;
    font-family:verdana,arial;
    text-color:#557803; 
}

#navigation ul
{
    margin:0px; padding:0px;
}
#navigation ul li
{
    display:inline; height:30px; float:left; list-style:none; margin-right:5px;
    position:relative;
}

#navigation li a
{color:#557803; text-decoration:none;}

#navigation li a:hover
{color:#black; text-decoration:underline;}

#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:20px;
background-color:#black;
}

#navigation li:hover ul
{
display:block;
width:160px;
}

#navigation li li
{
list-style:none;
display:list-item;
}



#navigation li li a
{color:#fff; text-decoration:none;}

#navigation li li a:hover
{color:#fff; text-decoration:underline;}



div.headerMainNav 
{
color:#333333;
font-family:verdana,arial;
font-size:16px;
height:auto;
line-height:150%;
position:relative;
text-align:right;
float:right;
}


a:link 
{
color:#557803;
text-decoration:none;
}

a:hover {
color:#999999;
text-decoration:none;
}

a:visited {
color:#557803;
text-decoration:none;
}

#pageBody 
{
background-color:#FFFFFF;
border:2px solid #999999;
left:0;
margin-left:auto;
margin-right:auto;
padding-left:15px;
padding-right:15px;
top:5px;
width:800px;
}

#administrationHeader 
{
background-color:#FFFFFF;
left:0;
margin-left:auto;
margin-right:auto;
margin-top:3px;
padding-right:5px;
text-align:right;
font-size: 9pt;
top:5px;
width:800px;
}

div.logo 
{
clear:top;
clear:bottom;   
left:0;
padding:0px;
position:relative;
width: 200px;
height:80px;
float:left;
}

div.mainBody 
{
color:#333333;
font-family:verdana,arial;
font-size:14px;
height:auto;
line-height:150%;
position:relative;
}

div.footer 
{
color:#999999;
font-family:times,serif;
font-size:10px;
padding-top:20px;
line-height:150%;
position:relative;
text-align:center;
bottom:10px;
style=clear:both;
}

Answer 1

我认为您需要注意 z-index。