Create horizontal drop-down menu for WordPress Categories/Pages

WordPress theme’s trends changes every few months. So you get to see new styles for WordPress every 6-8 months. These days there is a trend of displaying your categories and subcategories or pages and subpages in a drop-down horizontal menu in header.

Though many wordpress themes come with built-in simple horizontal menu, i.e. there is no drop-down facility, you can easily put advanced categories/pages menu in your header.

Just follow these simple steps, and you will have a horizontal drop-down menu in your blog’s header.

STEP I.
In the first step we’ll get WordPress to display the categories/pages list. For this just paste the following code in the header.php file of your theme.

<ul id=”nav2″ class=”clearfloat”>
<li><a href=”<?php echo get_option(‘home’); ?>/” class=”on”>Home</a></li>

<?php wp_list_categories(‘orderby=name&exlude=181&title_li=’);
$this_category = get_category($cat);
if (get_category_children($this_category->cat_ID) != “”) {
echo “<ul>”;
wp_list_categories(‘orderby=id&show_count=0&title_li=&use_desc_for_title=1&child_of=’.$this_category->cat_ID);
echo “</ul>”;
}
?>
</ul>

STEP II.
Now we should style our menu as per our needs, for this we need to add this to our stylesheet. Just paste this in your style.css file. We are not using any javascript for now, as we can get an advanced horizontal drop-down menu, without using javascript, But to ensure it’s compatibility with IE6 we’ll need to add the javascript, which I had described later.

#nav2{
background-color: #202020;
display: block;
font-size:1.1em;
height:50px;
width:100%;
}

#nav2, #nav2 ul {
line-height: 1;
list-style: none;
}

#nav2 a ,#nav2 a:hover{
border:none;
display: block;
text-decoration: none;
}

#nav2 li {
float: left;
list-style:none;
}

#nav2 a,#nav2 a:visited {
color:#109dd0;
display:block;
font-weight:bold;
padding:6px 12px;
}

#nav2 a:hover, #nav2 a:active {
color:#fff;
text-decoration:none
}

#nav2 li ul {
border-bottom: 1px solid #a9a9a9;
height: auto;
left: -999em;
position: absolute;
width: 900px;
z-index:999;
}

#nav2 li li {
width: auto;
}

#nav2 li li a,#nav2 li li a:visited {
color:#109dd0;
font-weight:normal;
font-size:0.9em;
}

#nav2 li li a:hover,#nav2 li li a:active {
color:#fff;
}

#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul {
left: 30px;
}

Once added the above code to your stylesheet, you are done with horizontal drop-down menu for all browserss except IE6. To ensure its compatibility with IE6 just place this javascript snippet as an external file or in the header.phpfile.

<!–//–><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav2").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);

//–><!]]>

Once done, your WordPress blog now have an advanced horizontal drop-down menu compatible with all browsers.