Custom CSS class or ID on menu items that have a Submenu

Question

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?

Answer 1

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');
});
</script>

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..

Answer 2

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.