0

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.

0

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.

  • 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. – sundaysloth Aug 11 '12 at 13:05
  • hi Ralissa! What doesn't work? here's an example: jsfiddle.net/q7DJb – pcarvalho 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. – sundaysloth Aug 13 '12 at 19:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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