how to use one of our css drop down menus with WordPress

Step 1: Download Menu Code
Use the link below to download the source code for this WordPress down down menu. We have more drop down menu designs that are compatible with this tutorial.
http://cssmenumaker.com/sites/default/files/menu_source/217/source.zip

Step 2: Upload Files
upload the whole folder called cssmenu to your WordPress theme’s directory.

Step 3: Build your Menu in WordPress
Appearance > Menus and build and save a custom menu.
Take note of your menu name (mine is ‘Main Navigation’) so that you can use it in the next step.

Step 4: Include CSS Styles
The next step is to add a little code to our functions.php file. Almost every WordPress theme has a functions.php file, but if you don’t see one in your theme just go ahead and create it.

What we want to do is let WordPress know about the new CSS and javascript files we just uploaded. The following function does just that. Place the below snippet of code at the bottom of your functions.php file

add_action('wp_enqueue_scripts', 'cssmenumaker_scripts_styles' );
function cssmenumaker_scripts_styles() {
wp_enqueue_style( 'cssmenu-styles', get_template_directory_uri() . '/cssmenu/styles.css');
}

Step 5: Add our Custom Walker Class to functions.php
We have created a custom WordPress Walker Class to make our menus more compatible with WordPress. This class alters the HTML output of your WordPress menu so that it will match the structure of the menus on our site. This will allow us to simply drop in the CSS code to get a menu theme working.

To use this place the code below inside the functions.php file inside your theme folder. If functions.php does not exist, create it and then drop this code in.

class CSS_Menu_Maker_Walker extends Walker {

var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );

function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent

\n";
}
function end_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "$indent

\n";
}

function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;

/* Add active class */
if(in_array('current-menu-item', $classes)) {
$classes[] = 'active';
unset($classes['current-menu-item']);
}

/* Check for children */
$children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
if (!empty($children)) {
$classes[] = 'has-sub';
}

$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

$output .= $indent . '
';

$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';

$item_output = $args->before;
$item_output .= '';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '';
$item_output .= $args->after;

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}

function end_el( &$output, $item, $depth = 0, $args = array() ) {
$output .= "

\n";
}
}

Step 4: Print Menu in Theme File
Now that we have our custom Walker function in place we need to actually print the menu in one of our template files. Place the below php snippet in any template file that you would like your menu to show up on.

wp_nav_menu(array(
'menu' => 'Main Navigation',
'container_id' => 'cssmenu',
'walker' => new CSS_Menu_Maker_Walker()
));
?>

1’menu’ => Name of the menu you created in Step 3.
2’container_id’ => The id that will be applied to the containing DIV around the menu. ‘cssmenu’ is our default that we use on the site. You can change this if you want but you will also have to change the CSS later.
3’walker’ => This tells the menu to use our custom Walker class to print out the HTML

Step 5: Check that everything works.
If everything was done correctly you should be able to see your brand new WordPress drop down menu theme applied to your WordPress menu. If not, here are a couple of common problems that might be the issue.

Make sure that your style sheet is linked up correctly. If all you see are blue links and an unformatted list then this is probably the issue. View the page source and make sure that the style sheet with your menu CSS is being included in the <head> section of your template.
Make sure the images are linked up properly in the CSS. If you see some styles applied but images missing this may be the issue.
If you run into any problems please leave comments below and we will try to help out

http://cssmenumaker.com/blog/wordpress-3-drop-down-menu-tutorial