Horizontal drop down category with hover effect working

Question

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='); ?>
</ul>
<?php
    $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; ?> 
            </ul>
        <?php }
    }
    elseif (is_single() && (post_is_in_descendant_category($category_id)) && $categories[0]->category_parent == $category_id ) { ?>
        <ul id="subnav">
            <?php            
                $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;
                }
            ?>
        </ul>
<?php } ?>

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

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