No replies
freecates
Offline
newbie
barcelona
Last seen: 18 years 10 weeks ago
barcelona
Joined: 2004-11-29
Posts: 1
Points: 0

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. Wink