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 '10 at 19:47
  • @Jan -- Pretty much. More on this technique is available at: alistapart.com/articles/dropdowns – aendrew Feb 9 '11 at 17:39
  • @aendrew: Nice link, why didn't you include it in your answer? – Jan Fabry Feb 10 '11 at 9:30
  • @Jan -- OP is asking for a dropline menu, not just a standard suckerfish menu. – aendrew Feb 10 '11 at 12:23

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, privacy policy and cookie policy

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