Today we are going to answer a common question regarding WordPress navigation. How to create simple drop down menus that work across browsers. If you are at all familiar with the web standards approach, then you have probably heard of Suckerfish Drop Downs.

http://htmldog.com/articles/suckerfish/dropdowns/

Integrating this is mostly CSS, but here is the WordPress code to get us started:

<ul class="nav">

</ul>

That code gets our menu started in the standard WordPress way. We just added in the sort by menu order code so that you can control your page order. Also the depth of 3 is set because that is as far out as we are taking our CSS, so it wouldn’t make sense to let our HTML break it.

Now to get the basic CSS in place:

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

#nav a {
display: block;
width: 10em;
}

#nav li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}

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

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

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

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

#content {
clear: left;
color: #ccc;
}

Now we have it working in all browsers except IE6 (which doesn’t properly support :hover). To support IE6 We need to add a few lines of JavaScript:

<code>sfHover = <span class="keywords">function</span><span class="brackets">(</span><span class="brackets">)</span> {
<span class="keywords">var</span> sfEls = <span class="global">document</span>.getElementById<span class="brackets">(</span><span class="string">"nav"</span><span class="brackets">)</span>.getElementsByTagName<span class="brackets">(</span><span class="string">"LI"</span><span class="brackets">)</span>;
<span class="keywords">for</span> <span class="brackets">(</span><span class="keywords">var</span> i=0; i&lt;sfEls.length; i++<span class="brackets">)</span> {
sfEls[i].onmouseover=<span class="keywords">function</span><span class="brackets">(</span><span class="brackets">)</span> {
<span class="keywords">this</span>.className+=<span class="string">" sfhover"</span>;
}
sfEls[i].onmouseout=<span class="keywords">function</span><span class="brackets">(</span><span class="brackets">)</span> {
<span class="keywords">this</span>.className=<span class="keywords">this</span>.className.replace<span class="brackets">(</span><span class="keywords">new</span> RegExp<span class="brackets">(</span><span class="string">" sfhover\\b"</span><span class="brackets">)</span>, <span class="string">""</span><span class="brackets">)</span>;
}
}
</code>

<code>}
<span class="keywords">if</span> <span class="brackets">(</span><span class="global">window</span>.attachEvent<span class="brackets">)</span> <span class="global">window</span>.attachEvent<span class="brackets">(</span><span class="string">"onload"</span>, sfHover<span class="brackets">)</span>;
</code>

That’s it!