1st. Step: Changing Header.php;

Just add this code to your theme’s header.php. You can show your categories/sub-categories or pages/sub-pages.

<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>

2nd. Step: The CSS;

You will change your theme’s style.css file for this menu’s style. Just copy this codes below.

#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;
}

If you ensure about IE6 add this java code below;

<!--//--><![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);

//--><!]]>

That’s All. The Original post is WordPress: “Magazine style” Horizontal dropdown menu.

Related posts:

1. Build a Top Sliding Login Panel
2. WordPress 3.0 Out!
3. How to Add Numbers Into Comments