WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Can someone share with me the easiest way to convert this to work with wordpress’s 3.0 built in menu support. So far I have the topnav menu working correctly, but I’m having a hard time getting the subnav to show. How would you make this code work with a default install of wordpress? I assumed that after adding <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'depth' => 0,'menu_class' => 'topnav', 'theme_location' => 'primary-menu' ) ); ?>

and changing subnav to sub-menu in the js and css. That everything would work. What am I doing wrong?

I’m using jquery 1.6.1 This is the original code from a static html page. JS


    $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)  

    $("ul.topnav li span").click(function() { //When trigger is clicked...  

        //Following events are applied to the subnav itself (moving subnav up and down)  
        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click  

        $(this).parent().hover(function() {  
        }, function(){  
            $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  

        //Following events are applied to the trigger (Hover events for the trigger)  
        }).hover(function() {  
            $(this).addClass("subhover"); //On hover over, add class "subhover"  
        }, function(){  //On Hover Out  
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"  



ul.topnav {  
  list-style: none;  
  padding: 0px 0px;  
  margin: -12px -11px 0;  
  float: left;  
  width: 922px;  
  background: #222;  
  font-size: 1.2em;  
  background: url(../images/topnav_bg.gif) repeat-x;  

ul.topnav li {  
    float: left;  
    margin: 0;  
    padding: 0 15px 0px 5px;  
    position: relative; /*--Declare X and Y axis base for sub navigation--*/  
ul.topnav li a{  
    padding: 10px 0px 5px 10px;  
    color: #fff;  
    display: block;  
    text-decoration: none;  
    float: left;  
ul.topnav li a:hover{  
    background: url(../images/topnav_hover.gif) no-repeat center top;  
ul.topnav li span { /*--Drop down trigger styles--*/  
    width: 17px;  
    height: 35px;  
    float: left;  
    background: url(../images/subnav_btn1.gif) no-repeat center top;  
ul.topnav li span.subhover {background-position: center bottombottom; cursor: pointer;} /*--Hover effect for trigger--*/  
ul.topnav li ul.subnav {  
    list-style: none;  
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/  
    left: 0; top: 35px;  
    background: #333;  
    margin: 0; padding: 0;  
    display: none;  
    float: left;  
    width: 195px;  
    border: 1px solid #111; 
ul.topnav li ul.subnav li{  
    margin: 0; padding: 0;  
    border-top: 1px solid #252525; /*--Create bevel effect--*/  
    border-bottom: 1px solid #444; /*--Create bevel effect--*/  
    clear: both;  
    width: 195px;  
html ul.topnav li ul.subnav li a {  
    float: left;  
    width: 170px;  
    background: #333 url(../images/dropdown_linkbg.gif) no-repeat 10px center;  
    padding-left: 25px;  
    font-size: 13px;

html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/  
    background: #222 url(../images/dropdown_linkbg.gif) no-repeat 10px center;  
share|improve this question

You need to target the appropriate theme_location.

Assuming you've defined multiple nav menu locations using register_nav_menus() in functions.php:

register_nav_menus( array(
    'primary-menu' => 'Primary Menu',
    'secondary-menu' => 'Secondary Menu'
) );

Then you call wp_nav_menu() using the appropriate theme_location as defined above, along with any other relevant arguments, e.g.:

wp_nav_menu( array(
    'theme_location' => 'primary-menu',
    'menu_class' => 'topnav'
) );

wp_nav_menu( array(
    'theme_location' => 'secondary-menu',
    'menu_class' => 'subnav'
) );

Also, note that some of your arguments, such as menu_order, are not valid arguments for wp_nav_menu(). Here are the defaults:

<?php $defaults = array(
  'theme_location'  => ,
  'menu'            => , 
  'container'       => 'div', 
  'container_class' => 'menu-{menu slug}-container', 
  'container_id'    => ,
  'menu_class'      => 'menu', 
  'menu_id'         => ,
  'echo'            => true,
  'fallback_cb'     => 'wp_page_menu',
  'before'          => ,
  'after'           => ,
  'link_before'     => ,
  'link_after'      => ,
  'items_wrap'      => '<ul id=\"%1$s\" class=\"%2$s\">%3$s</ul>',
  'depth'           => 0,
  'walker'          => );
share|improve this answer
I have only one menu registered. It has 4 top-top level pages with a few child pages. When I remove the ul.topnav li ul.subnav{} rule I can see the child pages. It seems like the empty <span> tag isn't being created. – Kelbizzle Sep 26 '11 at 23:39
Okay, let's try this a different way: what is the markup you want to end up with? – Chip Bennett Sep 27 '11 at 0:35
Sorry for the delayed response. This is the menu I'm using. noupe.com/tutorial/drop-down-menu-jquery-css.html – Kelbizzle Sep 29 '11 at 6:22

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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