It will be difficult to explain what I need in words, so please see a live demo of the horizontal navigation menu here, http://cn.wsj.com/gb/index.asp

I want to replicate it for wordpress categories. The top menu should always show parent categories, and the drop down should show children of the parent category currently highlighted. So far I have this code.

<ul id="nav">
    <li <?php if(is_home()) {echo 'class="current_page_item"';}?>><a href="<?php bloginfo('url'); ?>">Home</a></li>
    <?php wp_list_categories('orderby=name&depth=1&title_li='); ?>
    $cat = get_query_var('cat');
    $category = get_category ($cat);
    $categories = get_the_category();

    $subcat = get_the_category();
    $parentCatName = get_cat_name($subcat[0]->parent);
    $category_id = get_cat_ID( "$parentCatName" );

    function post_is_in_descendant_category( $cats, $_post = null )
        foreach ( (array) $cats as $cat ) {
            // get_term_children() accepts integer ID only
            $descendants = get_term_children( (int) $cat, 'category');
            if ( $descendants && in_category( $descendants, $_post ) )
                return true;
        return false;

    if ($category->cat_ID) {
        if($category->category_parent) {
            //Displays subcategories on subcategory index
            $children = wp_list_categories("orderby=id&hide_empty=0&title_li=&child_of=".$category->category_parent."&echo=0");
            else {
                //Display subcategories on parent category index
                $children = wp_list_categories("orderby=id&hide_empty=0&title_li=&child_of=".$category->cat_ID."&echo=0");
        if ($children) { ?>
            <ul id="subnav">
              <?php echo $children; ?> 
        <?php }
    elseif (is_single() && (post_is_in_descendant_category($category_id)) && $categories[0]->category_parent == $category_id ) { ?>
        <ul id="subnav">
                $category = get_the_category();
                $cat_term_id = $category[0]->term_id;
                $cat_category_parent = $category[0]->category_parent;
                $listcat = wp_list_categories('echo=0&child_of='.$cat_category_parent.'&title_li=');
                $listcat = str_replace("cat-item-".$cat_term_id, "cat-item-".$cat_term_id." current-cat", $listcat);
                if ( in_category( $cat_term_id ) || post_is_in_descendant_category( $cat_category_parent )) {
                    echo $listcat;
<?php } ?>

But the issue is how to make the hover thing work. Please help. Thanks.

  • 2
    The TwentyTen theme does something similar, only the submenus are stacked vertically. Everything is done in CSS. The trick is #access ul ul { display: none } and #access ul li:hover > ul { display: block }, which hides all sublists unless the parent list is hovered. If you base your layout on this, I think you can achieve the same effect.
    – Jan Fabry
    Oct 26, 2010 at 19:47
  • @Jan -- Pretty much. More on this technique is available at: alistapart.com/articles/dropdowns
    – aendra
    Feb 9, 2011 at 17:39
  • @aendrew: Nice link, why didn't you include it in your answer?
    – Jan Fabry
    Feb 10, 2011 at 9:30
  • @Jan -- OP is asking for a dropline menu, not just a standard suckerfish menu.
    – aendra
    Feb 10, 2011 at 12:23

1 Answer 1


You're wanting a CSS dropline menu, from what I gather.

  1. Basic example code: http://www.cssplay.co.uk/menus/pro_dropline2-5.html

  2. Tutorial, with jQuery code on making it look super spiffy (via SuperFish): http://users.tpg.com.au/j_birch/plugins/superfish/#sample4

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.