CSS Menu - Implementing "Second Level" sub-navigation

Hello,

I use this CSS code for all my websites. It is relatively straight forward and good for main navigation, and one level of dropdowns, but obviously is not built to handle the “second level” sub-navigation.

Can anyone lend a hand or point me into the right direction? If you view the code you will see under services > skilled services, there is supposed to be a flyout to the right of the navigation.

http://vismarkgroup.com/dev/helpmates/management.html

Please excuse the CSS being in the header for now. I am slowly trying to ween my co-worker off of dreamweaver (he designed the site).

Thanks ahead of time!

Hi Drew,

I just added my code above to your site via firebug and it worked straight away. I don’t see that you have added my code anywhere.

Also, we dont necessarily need the “second level” to hide when the third level shows if that makes it easier?

You misunderstand me:)

You are never hiding the currently hovered menu only the deeper nested menus.

When you say “li:hover ul {left:0}” that will show all nested uls at once. If you had ten nested menus then ten levels would be shown. You only want to show the next level only and hide any deeper nested menus.

Paul,

Thank you so much for the reply. Although it seems to not be working? Maybe a problem in my html for the menu itself?

Also, we dont necessarily need the “second level” to hide when the third level shows if that makes it easier?

http://vismarkgroup.com/dev/helpmates/management.html

Any additional help would be appreciated!

Drew

hi,

For another level just follow the same plan as usual but just remember that when you shows the first level you must then hide the second level.
e.g.
li:hover ul{left:0}
li:hover li ul{margin-left:-999em}

Then when you show the second level you must move it 175px from the left otherwise it will be under the first dropdown. (also move it to to top:0 at the same time.
e.g.
li li:hover ul {
margin-left: 175px;
top:0;
}

Here’s the full code for the extra level:


ul#nav li:hover li ul,ul#nav li.sfhover li ul {margin-left: -999em;}
ul#nav li li:hover ul, #nav li li.sfhover ul {
    margin-left: 175px;
    top:0;
}



Argh, we have two dev sites for this client and i updated the wrong one :blush:

As always thank you so much for your help.

Cheers