¿Cómo puedo hacer que este menú personalizado funcione?

Question

¿Alguien puede compartir conmigo la forma más fácil de convertir esto para trabajar con el soporte del menú 3.0 incorporado de WordPress? Hasta ahora tengo el menú Topnav funcionando correctamente, pero me está costando que se muestre el subnav. ¿Cómo haría que este código funcione con una instalación predeterminada de WordPress? Asumí que después de agregar<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'depth' => 0,'menu_class' => 'topnav', 'theme_location' => 'primary-menu' ) ); ?>

y cambiando SubNAV a submenú en JS y CSS. Que todo funcionaría. ¿Qué estoy haciendo mal?

Estoy usando jQuery 1.6.1 Este es el código original de una página HTML estática. Js

$(document).ready(function(){  

    $("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"  
    });  

});  

CSS

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; 
    z-index:500; 
}  
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;  
}