Mon, 2004-11-29 15:06
Can anyone help me? I need to avoid the child displaying behind the parent in the #nav div within the following layout structure:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ca">
<head>
</head>
<body id="sectionone">
<div id="container">
<div id="wrapper">
<div id="header">
</div>
<div id="top">
<div id="menutop">
</div>
</div>
<div id="menusuperior">
</div>
<div id="container">
<div id="nav" >
</div>
<div id="left">
<div id="menulateral">
</div>
</div>
<div id="situacionavegacio">
<div class="download">
</div>
</div>
<div id="content" >
</div>
</div>
<div id="menuinferior">
</div>
</div>
</body>
</html>
and with the following css
/* ------ Basic style ------ */
#nav {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-size: 9px;
font-weight: normal;
}
#nav ol { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 100%;
}
#nav li {
position : relative;
float : left;
background-color: #dad4c2;
}
#nav li ol {
position : absolute;
left: -999em;
margin-left :0;
top:100%;
z-index: 4;
}
#nav li ol ol { /* third-and-above-level lists */
left: -999em;
}
#nav li a {
display : block;
text-decoration : none;
padding: 2px 10px 2px 10px; /* top, right, bottom, left */
color: #000;
}
#nav ol li ol li {
position : relative;
float : left;
border: 1px solid #fff;
margin-bottom : -1px;
background-color: #000;
}
#nav ol li ol li a {
width: 140px;
w\idth : 140px;
display : block;
text-decoration : none;
padding: 2px 5px 2px 5px; /* top, right, bottom, left */
color: #fff;
}
#nav li a:hover {
background-color: #C00000;
color: #fff;
}
#nav li:hover {
background-color: #C00000;
}
#nav li:hover ol ol , #nav li:hover ol ol ol , #nav li.sfhover ol ol , #nav li.sfhover ol ol ol {
left: -999em;
}
#nav li:hover ol , #nav li li:hover ol , #nav li li li:hover ol , #nav li.sfhover ol , #nav li li.sfhover ol , #nav li li li.sfhover ol { /* lists nested under hovered list items */
left: auto;
}
#nav a.down {
background-color: #C00000;
color: #fff;
cursor: default;
}
#nav a.submenu {
background: transparent url(/gifs/arrow.gif) right no-repeat;
}
#nav a.submenu:hover {
background-color: #C00000;
color: #fff;
}
Thanks a lot. 
