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.
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.
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;
}