Can't get drop down menu working in Wordpress 3

Question

I developed a pretty basic custom theme for Wordpress and I am trying to implement a drop down menu for my primary navigation. I set up the nav structure using CSS and a smattering of JQuery. It works fine when I test it in a static HTML page, but when I implement it in WP, the sub-menu does not display.

Here is the CSS for the nav:

#topnav { clear:both ; width:1000px ; height:52px ; margin:auto ; background:url(images/topnav-bg.png) repeat-x ; position:relative ; top:0px ; right:0px ; z-index:9999 }

.jsddm
{   margin: 0;
padding: 0 ;
float:right ;
}

.jsddm li
{   float: left;
list-style: none;
font: 20px Tahoma, Arial;
margin-right:35px ;
margin-bottom:15px }

.jsddm li a
{   display: block;
color: #ffffff;
white-space: nowrap}

.jsddm li a:hover
{color:#6ec7fb}

.jsddm li a:active
{color:#6ec7fb}

li.current_page_item a { color:#6ec7fb }

.jsddm li ul
{   margin: 0;
    margin-top:-1px ;
    position: absolute;
    visibility: hidden;}

.jsddm li ul li
{   float: none;
    display: inline}

.jsddm li ul li a
{   width: auto;
    background: #002D56 ;
    color:#ffffff ;
    font-size:16px ;
    line-height:20px ; 
    padding:5px}

.jsddm li ul li a:hover
{   background: #015098 ;
color:#ffffff }

and here is the Javascript:

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('.jsddm > li').bind('mouseover', jsddm_open)
   $('.jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;

The site (in development) is here: http://s3.mynewsitereview.com/

In WordPress, to avoid issues with conflicting javascript frameworks, you should change from $(document).ready(function()... to jQuery(document).ready(function($)... (which will allow you to use the $ shorthand within the function, but prevent conflicts with prototype, etc.) — random_user_name

Maroshii Maroshii · Accepted Answer · 2012-03-07T16:54:20

The function is not executing. You can see this in firebug mainly because the CSS added through Jquery is added inline and when you hover nothing happens. The problem is the selector. jsddm is the div and the li is not a direct child. Try:

$('.jsddm > ul > li')

I haven't tried it but it should be that.

Can't get drop down menu working in Wordpress 3

1 Answers