Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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");` 
share|improve this question
    
ul#main-menu-nav > li > ul.submenu Child selectors are your friend. meyerweb.com/eric/articles/webrev/200006b.html –  chrisguitarguy Dec 21 '11 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 Dec 21 '11 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 Dec 21 '11 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 Dec 21 '11 at 4:17
add comment

1 Answer

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
  left:100%; 
}

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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