If I want to apply a style to only an item in a menu that has a submenu, how can I select that with CSS?


You could use jQuery, if you're open to a jQuery solution?

<script type="text/javascript">  
jQuery(document).ready( function($) {
    $('#your_menu_id li').has('ul').addClass('has_children');

Slight modification of what i posted here basically.

Any menu item with a submenu will then have a has_children class you can target in the stylesheet..

#your_menu_id li.has_children { /* your styling */ }
#your_menu_id li.has_children ul { /* your styling */ }
#your_menu_id li.has_children ul li { /* your styling */ }

Hope that helps..


Go to my menu area in admin, click the “Screen Options” link at the top, and check the “CSS Classes” then on each menu I’ll have an area I can define my css class for that menu item. enter image description here enter image description here

  • This is a good solution if your pages aren't changing, but I'm dealing with users who are changing pages and won't remember to add the CSS class. – GavinR Apr 19 '11 at 0:38
  • Yeah its for the less advanced users. – Bainternet Apr 19 '11 at 9:10

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.