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秒の世話をする必要があると思います。