12 February 2013

Creating a jQuery/CSS multi-level dropdown menu in WordPress

Wordpress dropdown menu

WordPress’s navigation HTML can look quite confusing when you first look at it with its various classes and IDs. But on closer inspection, it’s actually outputting a straightforward unordered list. The classes and IDs are added in so that you can customise it to your heart’s content.

The HTML (stripped down):

It’s easy to style this into a simple horizontal menu. And with the addition of some jQuery and the CSS display property ‘hidden’, it’s possible to hide the submenus, triggering them on mouseover.

The CSS:

The jQuery: