Dropdown Menu Question

[krim]

Hi all. I know this has been done to death, but I've spent a good amount of time searching, and more hours trying to guess and just can;t get this.

I am using the "Son of Suckerfish" code [htmldog.com...] for a menu.

But I want to have an image background in the top level list, but not in the second and so on lists. I can't seem to get it right. How can I have the image on the top, but not in the dropdowns.

I've used the exact code from the tutorial, and everything else works well.

Thanks, Lena

[Tourz]

I'll take a wing at this, though I am still figuring out CSS...

It sounds like all you might have to do in order to have the sub-menus not have a background image is put down some specific CSS to cancel the order from above.

For example, if you have

#nav li { background-image: cool.jpg;}

then you can cancel it in the submenus below with

#nav li li { background-image: none;}

If you are talking about bullet images (list-style-image) then its the same principle.

[krim]

Hi Tourz!

Thanks, that was easy! Sometimes I miss the most obvious things. I also had another style for something else that was messing things up. I think I have it now.

Maybe someone can just glance at this and see if there is anything obvious, or mention a way to clean it up. Thanks!

#nav {
 background:transparent;
 width: 100%;
 font-family: Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif; 
 font-size:11px;
 letter-spacing:0.2em;
}
#nav ul { 
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav li { 
float: left;
}
#nav li a {
 background:transparent url(image.jpg) no-repeat left bottom;
 display: block;
width: 120px;
 height: 11px;
 color: #FFF;
text-align:center;
margin:0;
 padding: 6px 4px 7px 0;
 text-decoration:none; 
}
#nav li a:hover {
 background:transparent url(image.jpg) no-repeat left bottom;
 display: block;
width: 120px;
 color: #000;
 height: 11px;
 font-weight:600;
text-align:center;
margin:0;
padding: 6px 4px 7px 0;
text-decoration:none; 
}
#nav li li a {
background-image:none;
text-align:left;
color:#000;
padding:7px 4px 7px 7px;
}
#nav li li a:hover {
background-image:none;
text-align:left;
color:#000;
font-weight:600;
padding:7px 4px 7px 7px;
}
#nav li ul { /* second-level lists */
position: absolute;
background: #EEE;
width: 160px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

[cmarshall]

Be impressed [cssplay.co.uk]

[Tourz]

wow, no javascript. nice

[cmarshall]

Stu Nicholls may just be the best CSS designer in the world.

Check out all the other stuff on his site.