Hi,
You just need to cancel out the styles you don't want on the nested items which can be done simply by being more specific. e.g. to reset a nested image to its default then use the shorthand background and set it to transparent or a solid colour. (#nav ul ul li a{background:#fff})
Code:
#nav a:link,#nav a:active,#nav a:visited{
color: #ffffff;
font-weight: bold;
}
#nav li:hover ul { display: block; }
#nav li{position:relative;}
#nav li ul {
position: absolute;
left: 0;
top: 2em;
display: none;
background: #FFF;
border: 1px solid #666666;
}
#nav li ul li {
background:#fff;
border-bottom:1px solid #000;
width:100%;
padding:0;
margin:0;
}
#nav li ul li a{
background:#fff;
color:#000;
text-align:left;
}
#nav li ul li a:link,#nav li ul li a:visited{color:#000}
#nav li ul li a:hover{background:#ffffcc;color:#fc0}
#nav a:hover{
color: #FFCC00;
}
/* ooo */
/*aaa*/
/*end nav*/
If you set the parent list to position:relative then that creates a local stacking context for further positioned elements and they will remain in context with that parent.
You will need to add javascript to cater for ie6 so look at the suckerfish drop downs which explain all these issues.
There are also issue in placing drop downs over flash elements so look at the sticky in the flash forum as it explains what you need to do.
Bookmarks