It used to be easy to do a dropdown menu, as developer gets to decide how many level of dropdown and style accordingly. However, with the newly featured custom menu, developers cannot expect how many level the end-users will think of using.

I personally use a lot of CSS dropdown menu. Easy to style, like this:

#menu {height: 40px; z-index: 100; clear: both; position: relative;}
#menu li.current-menu-item a {color: #fff; background: url('images/menu_hover_active.gif') no-repeat center;}
#menu ul li {float: left; position: relative;}
#menu ul ul {display: none;}
#menu ul li:hover>ul {display: block; position: absolute; z-index: 120; width: 200px; background: #991818;}
#menu ul ul ul {display: none;}
#menu ul li:hover>ul li:hover>ul {display: block; position: absolute; z-index: 120; left: 200px; top: 0; width: 200px; background: #991818;}
#menu a {display: block; padding: 12px 15px; color: #fff;}
#menu a:hover {background: url('images/menu_hover_active.gif') no-repeat center;}
#menu ul li ul li a {display: block; padding: 10px 15px; width: 180px; color: #fff;}
#menu ul li ul li a:hover {background: none;}

Then on the php file, it goes like:

<div id="menu">
<?php if (function_exists('wp_nav_menu') ) { wp_nav_menu('menu=Top Menu&container_class=top-menu1'); } else {?>
<ul><?php wp_list_pages('title_li='); ?></ul>
<?php } ?>
</div>

I was searching around for a better JQuery that helps building unlimited dropdown menu and small in size, undeniably, Suckerfish is one of the most used plugin, but it doesn’t really do good and too complicated to style. To make life easier, try jQuery Multi Level CSS Menu I found from Dynamic Drive.

Basically, just download the plugin and add 2 classes into CSS. 1, Arrow pointing down then there is submenu from first level, and 2, Arrow pointing right when there is submenu on third level onward.

First, download the plugin (Don’t need the CSS). Add script link on header.php

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jqueryslidemenu.js"></script>

Find this code (Line 10):

var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}

and (Line 26,27,28):

'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'

Change to

var arrowimages={down:['downarrowclass'], right:['rightarrowclass']}

and:

'<span class="'
+ (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />'

That is so you don’t have to look for the folder for the images location and easier to style in the future too.

Now that you changed the plugin calling. From calling it for image <img src="" /> to calling a span, you’ll need to add both CSS:

#menu a span.menu-down {background: url('images/menu_down.gif') no-repeat right center; padding: 0 8px;}
#menu a span.menu-right {background: url('images/menu_right.gif') no-repeat right center; padding: 0 8px;}

That’s all! No more adding this and that, just change it with a few steps, I get unlimited dropdown menu, end-user gets to drop all the way down for their menu