HELP PLEASE!! Trying to get JQuery Multilevel menu to work
Hey JQuery Experts. I'm a total newbie to JQuery. I'm having some trouble with getting my JQuery multilevel menu to work properly. Can't seem to get the third level sub menu <ul id="bigs"> to become visible on a mouseover action off the first li element (Security) of the <ul id="subMenu2"> Here's both JQuery & html code to examine. Can't see what I'm doing wrong. Thanks for your help JQuery Gurus.
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
var ddmenuitem2 = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');
ddmenuitem2 = $(this).find('ul ul#bigs').css('visibility', 'hidden');
$(this).find('ul#subMenu2 li:first').mouseover(function(){
jsddm_show();
});
}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_show()
{ if(ddmenuitem2) ddmenuitem2.css('visibility', 'visible');}
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;
</script>
</head>
<body>
<ul id="jsddm">
<li><a href="#" id="home" class="indentText">Home</a></li>
<li><a href="#" id="about" class="indentText">About</a>
<ul>
<li><a href="#">Company</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Employment</a></li>
</ul>
</li>
<li><a href="#" id="service" class="indentText">Services</a>
<ul>
<li><a href="#">What We Do</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</li>
<li><a href="#" id="systems" class="indentText">Systems</a>
<ul id="subMenu2">
<li><a href="#">Security</a>
<ul id="bigs">
<li><a href="#">Alarms</a></li>
<li><a href="#">Access Control</a></li>
<li><a href="#">Emergency Call</a></li>
</ul>
</li>
<li><a href="#">Packages</a></li>
<li><a href="#">Safety Tips</a></li>
</ul>
</li>
<li><a href="#" id="referral" class="indentText">Referrals</a></li>
<li><a href="#" id="contact" class="indentText">Contact</a></li>
</ul>
</body>
</html>