<?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 buytramadolbest.com 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:

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: