Adding Horizontal CSS Drop Down Menus to Your Theme in WordPress 3.0

WordPress 3.0 adds custom menu functionality to WordPress. In simple terms, this means that you can build your own navigation menus in your theme, easily choosing links to pages, categories and even external links.

The WordPress Custom menus allow for very easy, drag and drop sub menus to be built and it does not take a lot of work to turn these sub menus into search engine friendly, css drop down menus for your custom wordpress theme.

This tutorial will take you through the everything you need to add to your php template and your css code in order to add great looking horizonal css drop down menus to your custom wordpress theme.

If you are looking for the best place to host your WordPress site, knowing that it will run very fast and always be secure, be sure to check out WPEngine

Step 1: Adding Custom Menu Support to your custom WordPress theme

Very simply, all you have to do is open your functions.php file. This is located in your theme directory. If you don’t already have one, create one.

Add this code:

function register_my_menus() {
	register_nav_menus(
		array(
			'top-nav' => __( 'Top Nav' )
		)
	);
}

This code simply tells wordpress that you have 1 menu position in your theme, called “Top Nav”.

If you now go to admin-appearance-menus you can then create a new menu.

Give your menu a name like Main Menu and click “Create Menu”

You should then see something like this:




From here, you can very easily add pages, categories and custom links to your menu, so build yourself a menu.

You can drag and drop menu links into the order that you want and if you drag a link to the right, it makes it a sub-menu item of the item above.

Do not forget to click “Save Menu” when you are done.

Step 2: Adding the Custom Menu to your Custom WordPress Theme

You may have noticed that although you have built a lovely new custom menu, it is not visible when you look at your WordPress site.

This is because you now need to add the custom menu to your custom theme.

If you are using a header.php file, you need to add something like the following code to the header.php file (in the position where you want your nav menu)

<!--?php wp_nav_menu( array( 'theme_location' =--> 'top-nav' , 'container_class' => 'menu-header' ) ); ?>

This code tells WordPress that this is the “Top Nav” position for your menu. It also tells WordPress to put the menu in the “menu-header” container class -the reason for doing this will become apparent later.

Looking at you WordPress site, depending on your css, you should see something like this:





In order to make this into a nice, horizontal, drop-down menu, we need to style it with some css.

Step 3: Styling Your Custom WordPress Horizontal Drop-Down Menu with CSS

The Custom WordPress Menu that you have produced is an un-numbered list and if you look at the source code that is produced, it will be something like:

This is basically an un-numbered list (ul) – the submenu items are ‘nested’ in another un-numbered list.

It may look nasty at the moment but this can all be fixed with css and it is worth noting that un-numbered lists are the most search engine friendly menus to use in your WordPress site.

Making the List Horizontal and Removing the Bullets

Add the following to your style.css file:

.menu-header {
	display: block;
	float: left;
	margin: 0 auto;
	width: 100%;
	height: 42px;
}
.menu-header ul,
	div.menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-header li,
	div.menu li {
	float: left;
	position: relative;
}

This should make your Custom WordPress menu start to take shape. It should now be horizontal with no bullets and the submenu should appear underneath, something like this:

Positioning and Hiding the Submenu

The submenu needs to be hidden (we will make it appear on hover later). Add the following css to your file:

.menu-header li,
	div.menu li {
	float: left;
	position: relative;
}

.menu-header ul ul {
	display: none;
	position: absolute;
	top: 38px;
	left: 0;
	float: left;
	width: 180px;
	z-index: 99999;
}

This will make the menu look something like this:

Better Colouring and spacing things out

We can then change the font colours and styling and space out the links:

.menu-header a {
	color: #aaa;
	display: block;
	line-height: 41px;
	padding: 0 10px;
	text-decoration: none;
	font-weight: normal;
}

So, our menu will then look like this:

Adding the Hover

To make the sub-menu appear, we need to use the :hover pseudo-class.
Add the following css:

.menu-header ul li:hover > ul {
	display: block;
}

We can also add some colouring to the hovering menu:

.menu-header li:hover > a,
.menu-header ul ul :hover > a {
	background: #333;
	color: #fff;
}

This should give you the following:



The hover should work in all browsers.

Styling the Submenu

We need to make the submenu vertical and give it some colour.

.menu-header ul ul a {
	background: #333;
	line-height: 1em;
	padding: 10px;
	width: 160px;
	height: auto;
}

To match the colourscheme, we are going to give the whole nav bar a black background by adding:

background-color: #000;

to the menu-header class, so you end up with:

.menu-header {
	background-color: #000;
	display: block;
	float: left;
	margin: 0 auto;
	width: 100%;
	height: 42px;
}

We are now nearly there.

Highlighting the Current Page

WordPress adds classes to the current menu item. You can use this to style them. Try adding this to your css:

.menu-header ul li.current_page_item > a,
.menu-header ul li.current-menu-ancestor > a,
.menu-header ul li.current-menu-item > a,
.menu-header ul li.current-menu-parent > a {
	color: #fff;
}

This highlights the current item, making the font white.

The finished product:



So, there you have it. Proper CSS Custom Drop Down menus in WordPress!