Page 1 of 1

Styling nested lists

Posted: Mon Aug 11, 2008 11:25 pm
by Chalks
Help! I really can't figure out what I should be doing here. I've put my menu into a unordered list, and it has a variable number of lists inside it. I want it to display in such a way that only the list items in the first UL show in a line across the menu bar, and when I hover the mouse over them, the rest of the lists pop up (the format of those isn't nearly as important). Here's what I've got now. I can't figure out how to make the other ULs appear beneath those headers.

Thanks

relevant CSS:

Code: Select all

#main a {
display: block;
}
#main li {
display: block;
float: left;
list-style-type: none;
text-align: center;
width: 40px;
}
#main li ul {
display: none;
visibility: visible;
width: 5px;
}

Re: Styling nested lists

Posted: Tue Aug 12, 2008 5:25 am
by jayshields
I think you need to re-think your mark up and then make use of the :first-child and :hover pseudo CSS classes.

This looks good http://www.cssplay.co.uk/menus/final_drop.html
Actually that one is a bit complex, this one might be closer to what you're after http://www.cssplay.co.uk/menus/basic_dd.html

Re: Styling nested lists

Posted: Tue Aug 12, 2008 11:28 am
by Chalks
Thanks Jay, that's almost exactly what I was looking for. I knew my markup wasn't the best ever, but I wasn't really sure how to change it... those examples help tremendously.