Horizontal CSS/Javascript menu

HTML & CSS
1

Hey there,

I’m needing a horizontal menu for my website which is nested twice by which I mean that you can select a subitem and go down another level into a further sub menu. I know that there is a whole wealth of code snippets to steal to do this but to reuse other peoples code is not my aim. I really wish to understand the CSS which makes this work, I already have the javascript and CSS for a one submenu setup. Here is my CSS code below:

/* The whole menu /
#menu {
position: absolute;
}
/ Each menu name /
#menu li {
float: left;
list-style-type: none;
padding-right: 20px;
width: 100px;
background-color: silver;
}
/ The entire submenu /
#menu li ul {
background-color: silver;
margin: 0px;
padding: 0px;
}
/ Each submenu item */
#menu li ul li {
padding: 0px;
margin: 0px;
float: none;
list-style-type: none;
width: 80px;
}

What i want to know is what to add to it to nest a further <ul> <li> menu

thanks

Will

2

Thanks very much, that actually answered my question

regards

Will

3

I think everyone is a little bit confused as to what you want which is why no one answered :slight_smile:

Perhaps you could post the full css and html for that section so we can get an idea of what you are looking for - or better still a link to the page.

Styling nested lists is no different from styling anything else but you have to remember that the rules from the parent list will cascade so you must counteract them if you don’t need the styles that they apply. Most of the work is just making sure that you reset any unwanted styles on the child.

If the sub list is reached from … #menu li ul {}
Then a nested list would be one deeper … #menu li ul li ul {}

Of course it does get a little complicated with all those rules flying around as I mentioned above.