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 use custom menus with drop down. I want to make two different drop-down menus each with different styling. Wordpress puts drop-down items in a single ul with class="sub-menu". But I need different class for each menu.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
  <ul class="sub-menu">
      <li>Sub menu item 1</li>
      <li>Sub menu item 1</li>
  </ul>
</li>
</ul>

I found that this could be achieve with something called Walker but I didn't understand it.

share|improve this question
add comment

1 Answer

up vote 0 down vote accepted

if you don't want to use a custom menu walker, you can use the classes wp already puts out.

If you add a class to the menu item you know will have a extra ul, you'll have something like this

<ul>
    <li class="menu-item menu-item-1">Item 1</li>
    <li class="menu-item menu-item-2">Item 2</li>
    <li class="sub-1 menu-item menu-item-3">Item 3
      <ul class="sub-menu">
          <li>Sub menu item 1</li>
          <li>Sub menu item 1</li>
      </ul>
    </li>
    <li class="sub-2 menu-item menu-item-3">Item 3
      <ul class="sub-menu">
          <li>Sub menu item 1</li>
          <li>Sub menu item 1</li>
      </ul>
    </li>
</ul>

you can then select in your css

.sub-1 ul { color: blue; }
.sub-2 ul { color: red; }

to add a css class to the menu item, make sure you have "css classes" ticked, in the "screen options" in the menu page.

share|improve this answer
    
It doesn't work. I want to target the UL, not the parent LI. .sub-2 ul {} doesn't work. I don't mind using custom menu walker, I just don't know how. –  Ralitsa Nikiforova Aug 11 '12 at 13:05
    
hi Ralissa! What doesn't work? here's an example: jsfiddle.net/q7DJb –  peteroak Aug 12 '12 at 10:53
    
Thank you! I modified my CSS and everything is fine now :) My code was "ul.sub-2" - that was the problem. –  Ralitsa Nikiforova Aug 13 '12 at 19:03
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.