The WordPress menu system is great: it’s flexible and allows users to very easily customize / control the layout of their menus, including multi-tiered drop downs. If you browse any of the theme marketplaces, such as Mojo Themes, you will see a lot of themes with beautiful drop down menus, some that are even powered with pure CSS. Have you ever wandered how to do that with CSS alone? Well, that’s what I’m going to show you.

This tutorial isn’t going to cover how to create a beautiful menu, but rather how to create the base CSS code that you will need in order to make one that is beautiful, and also functional. We will be creating a pure CSS multi-level drop down menu system. One of the primary goals is too also write our CSS such that it works with the default WordPress pages menu (displayed when a user hasn’t created a menu yet) and also the 3.0 nav menus. This way the user has a flawless experience when they activate the theme.

So I’m going to show you how to write the CSS structure needed to make something like this (just the menu):

Setting Up Our Menu and its Container

The first thing we need to do is setup our menu so that we can target it with our CSS regardless of whether a nav menu is shown or a default pages menu is displayed. To do this, we wrap our wp_nav_menu() function with a DIV that has an ID of main-nav. Note, the ID can be whatever you want, but I will use “#main-nav” throughout this tutorial.

001 <div id="main-nav">
002     <?php wp_nav_menu(array('theme_location' => 'main_nav', 'container' => '')); ?>
003 </div>

I’ve set the “container” parameter to be empty because I do not want the nav menu creating a DIV, or any other kind of wrapper, for me.

When rendered, the default page menu structure looks like this:

001 <div class="menu">
002     <ul>
003         <li><a href="#">Menu Item</a></li>
004         <li><a href="#">Menu Item</a>
005             <ul>
006                 <li><a href="#">Sub Menu Item</a></li>
007                 <li><a href="#">Sub Menu Item</a>