WordPress Subcategories as Dropdown Menu by CSS Help

1 Votes, Rating: 5

Tags: Wp subcategories menu, wp subcategory as dropdown menu

How to add Child Categories as dropdown menu in Wordpress by CSS help.

In last post i have written about subpages dropdown menu’s now Here Im telling you about Categories and subCategories. Its also similar way to do, as we have done on pages. we need to add Css classes as i have added below and make a small change on wordpress theme’s header or sidebar where you needed it

Step 1

Css/ add these classed in your theme css

/*- Nav / Dropdowns-*/
#nav, #nav ul{
 padding: 0;
 float:left;
 list-style: none;
}
#nav a {
 font-size:12px;font-family:Arial, Tahoma, Verdana;line-height:34px;text-transform:uppercase;font-weight:700;color:#dfdfdf;display:block;margin-right:5px;text-decoration:none;padding:0 20px 0 20px
}
#nav li {
 float: left;
 line-height:27px; 
}
#nav li a:hover {
background: none;
color:#50daf7;
}
#nav li ul {
 position: absolute;
 width: 15em;
 left: -999em;
 padding-top:0px;
}
#nav li:hover ul, #nav li.sfhover ul {
 left: auto;
 z-index:1000; 
}
#nav li ul li {
    background: #000;
 border-bottom:1px solid #1e2527; 
 border-left:1px solid #1e2527; 
 border-right:1px solid #1e2527;   
 line-height:18px; 
 width:20em;
}

///////

Step 2

replace category codes as below

Search this

<?php wp_list_categories(’title_li=’ ); ?> 

and replace

<ul id=”nav”>
<?php wp_list_categories(’title_li=’ ); ?> 
</ul>

 thats is it.

please check other post for subpages dropdown

http://www.w3cgallery.com/w3c-blog/wordpress-hack/wordpress-sub-pages-as-dropdown-menu-by-css

4 Responses to “WordPress Subcategories as Dropdown Menu by CSS Help”

1. Hy says:
   February 12th, 2010 at 8:39 pm

   Hey this works great in Safari but it shows the dropdowns on the right side (instead of underneath) in Firefox, and it doesn’t work at all in IE7. Please help!

2. SAN says:
   February 16th, 2010 at 7:34 am

   please check your css, it must has some duplicate class or something..which hurting dropdown class..
   see this site http://www.palsahab.com/
   it works fine

3. Hy says:
   February 17th, 2010 at 12:43 am

   I see that, you’re right it looks fine. How would I find the duplicate? I named it “nav2″ and nothing else uses nav2. Would you mind emailing me and helping me out?

   Thanks

4. Hy says:
   February 17th, 2010 at 12:50 am

   Ok I found the culprit, but now there’s a slight space in between the “parent” category link and the drop down sublinks (Firefox only). So when I hover over the main parent link and try to move the cursor down to hover over a sublink, the dropdown closes… unless I do it really quickly. Any idea what could be causing this? Thanks

Leave a Reply