Styling nested lists

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Chalks
Forum Contributor
Posts: 447
Joined: Thu Jul 12, 2007 7:55 am
Location: Indiana

Styling nested lists

Post 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;
}
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Re: Styling nested lists

Post 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
User avatar
Chalks
Forum Contributor
Posts: 447
Joined: Thu Jul 12, 2007 7:55 am
Location: Indiana

Re: Styling nested lists

Post 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.
Post Reply