I'm running into a problem trying to style a drop down menu with a second level. Wordpress seems to apply the same .sub-menu class to any and all sub menus, and I can't figure out a reliable, cross-browser way to target the 1st level .sub-menu without also hitting the 2ne level .sub-menu. Example:
Example URL: http://getc.thefstopdesign.com/
Look under the Products menu item to see my problem. The Saddles & Accessories item has a sub menu of its own that I want to fly out to the side, but it is getting hit with the first level sub menu CSS.
Basic menu code I get from WordPress:
<ul id="main-menu-nav">
<li><a href="">one</a></li>
<li><a href="">two</a>
<ul id="sub-menu">
<li><a href="">sub-one</a></li>
<li><a href="">sub-two</a>
<ul class="sub-menu">
<li><a href="">sub-sub-one</a></li>
<li><a href="">sub-sub-two</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">three</a>
Basic drop down CSS I am using:
#main-menu-nav li{
position: relative;
}
#main-menu-nav .sub-menu{
position: absolute;
left: -9999px;
}
#main-menu-nav li:hover .sub-menu{
left: 0;
}
It would be great if the second level menu could just vet a different CSS class, but I can't find a way to do it.
EDIT: I figured out my cCSS child selector problem and got everything working OK. It was a unrelated issue, related to an error I had made elsewhere in the CSS< which I won;t bore you with.
I also realized a very easy way to add this functionality with jQuery. Something like this:
$('#menu-main-nav > li > ul').addClass("sub-one");
$('#menu-main-nav > li > ul > li > ul').addClass("sub-two");`
ul#main-menu-nav > li > ul.submenu
Child selectors are your friend. meyerweb.com/eric/articles/webrev/200006b.html