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>
    <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 Commented Dec 21, 2011 at 3:45
  • I tried child selectors, but the entire menu was FUBAR in IE7. I don't do full support for old versions of IE, but I don't like things totally broken. Maybe I was doing it wrong, but very similar to what you have there, Christopher.
    – Gabe
    Commented Dec 21, 2011 at 4:15
  • I just tried some quick & dirty jQuery: $('li.level-one').parent().addClass("sub-one"); $('li.level-two').parent().addClass("sub-two");
    – Gabe
    Commented Dec 21, 2011 at 4:16
  • Damn this comment window is weird..using the above jquery along with classes on the li works, but now the menu flashes unstyled for a second before going into place.
    – Gabe
    Commented Dec 21, 2011 at 4:17

1 Answer 1


I had gone through the given link in your question and using firebug i have added and remove some css rules. Please have look on the below css rules.

#menu-main-nav .sub-menu {
  /*left:-9999px;*/ // remove from line 648

#menu-main-nav .flyout-parent .sub-menu {
  background: none repeat scroll 0 0 rgba(255, 232, 198, 0.95);
  border-color: #AAAAAA;
  border-style: solid;
  border-width: 1px 1px 1px 0;
  /*left:-9999px;*/ // remove from line 677
  opacity: 0;
  position: absolute;
  width: 240px;
  visibility:hidden; // add this on line 677

#menu-main-nav .flyout-parent:hover .sub-menu {
  left: 100%;
  opacity: 1;
  top: -2px;
  visibility: visible; // add this on line 691 

#menu-main-nav li:hover .flyout-parent .sub-menu {
  /*left:-9999px;*/ // remove from line 688

Please leave a comment if you get any problem or changes required.

Note: I have just checked using firebug. So please backup your css and then change/update your css.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.