Menu CSS Dropdowns Afficher derrière le contenu

Question

Je travaille sur http://www.comehike.com (maintenant juste un bac à sable) et vous pouvez voir que si vous passez la souris sur l'élément nav "randonnées", les listes déroulantes semblent être derrière le contenu de la page.

J'ai vu un certain nombre de sujets concernant des problèmes similaires, mais aucun d'entre eux n'était ce dont j'avais besoin.

Voici mon css juste au cas où:

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

Je pense que vous devez prendre soin de z-index s.