Creating cross-browser compatible drop-down menu navigation is a bit tricky, especially when you need to be able to easily make changes to the menu content.

WordPress’s wp_list_pages() function allows you to quickly create a dynamic navigation menu using your pages and sub-pages. Using this function, some JavaScript and CSS, we can create Suckerfish style drop-down menus in no time.

Step 1: The XHTML

The first thing we need is an XHTML list to style. In your WordPress theme file, insert the following code wherever you want your navigation menu to appear:

<ul id="nav">

<?php wp_list_pages('title_li=&depth=2&sort_column=menu_order'); ?>

</ul>

This code generates a link to each of your pages (and their children, up to 2 levels deep) sorted by their order number and placed into unordered lists.

wp_list_pages uses your Pages to create its list. To create a sub-page, simply set its Parent  (in the Attributes pane) to the appropriate Page. Once you have your Pages created, your XHTML output should look something like this:

<ul id="nav">
     <li><a href="http://www.yoururl.com/menu_item_1" title="Menu Item 1">Menu Item 1</a>
          <ul>
          <li><a href="http://www.yoururl.com/menu-item-1/sub-item-a" title="Sub Item A">Sub Item A</a></li>
          <li><a href="http://www.yoururl.com/menu-item-1/sub-item-b" title="Sub Item B">Sub Item B</a></li>
          <li><a href="http://www.yoururl.com/menu-item-1/sub-item-c" title="Sub Item C">Sub Item C</a></li>
          </ul>
     </li>
     <li><a href="http://www.yoururl.com/menu_item_2" title="Menu Item 2">Menu Item 2</a>
          <ul>
          <li><a href="http://www.yoururl.com/menu-item-2/sub-item-a" title="Sub Item A">Sub Item A</a></li>
          <li><a href="http://www.yoururl.com/menu-item-2/sub-item-b" title="Sub Item B">Sub Item B</a></li>
          <li><a href="http://www.yoururl.com/menu-item-2/sub-item-c" title="Sub Item C">Sub Item C</a></li>
          </ul>
     </li>
     <li><a href="http://www.yoururl.com/menu_item_3" title="Menu Item 3">Menu Item 3</a>
          <ul>
          <li><a href="http://www.yoururl.com/menu-item-3/sub-item-a" title="Sub Item A">Sub Item A</a></li>
          <li><a href="http://www.yoururl.com/menu-item-3/sub-item-b" title="Sub Item B">Sub Item B</a></li>
          <li><a href="http://www.yoururl.com/menu-item-3/sub-item-c" title="Sub Item C">Sub Item C</a></li>
          </ul>
     </li>
</ul>

Step 2: The JavaScript

Internet Explorer is notoriously finicky with the :hover pseudo-class on anything that isn’t an anchor tag. To alleviate this problem, place this JavaScript in your header. Make sure that the document.getElementById() snippets point to the appropriate DIVs.

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {

var sfEls = document.getElementById("nav").getElementsByTagName("LI");

for (var i=0; i<sfEls.length; i++) {

sfEls[i].onmouseover=function() {

this.className+=" sfhover";

}

sfEls[i].onmouseout=function() {

this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

}

}

}

if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]>

</script>

Step 3: The CSS

Since the style of your menu is going to depend on the rest of your theme, this is going to be the most heavily modified portion of your code.

#nav, #nav ul { /* all lists */
list-style: none;
line-height: 1;
}

#nav a {
color: #fff;
display: block;
width: auto;
text-decoration: none;
}

#nav a:hover {
text-decoration: underline;
color:#15bf16;
}

#nav li { /* all list items */
float: left;
height: 40px;
padding: 0 15px;
width: auto; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
position: absolute;
background: #27466e;
width: 10em;
margin-top: 5px;
padding-top: 5px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul a
{
font-size: 12px;
}

#nav li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 10em;
}

#nav li ul li
{
height: auto;
padding-bottom: 10px;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

Once you’ve adapted the styling to your liking, you’re done.

This code came from the Son of Suckerfish article over at HTML Dog. They offer a very detailed look at the coding and why it works the way it does. I just wanted to provide a quick-look reference of how to use it in a WordPress theme without resorting to a plugin.