How Do I Bind Mouseover/Mouseout to My Multi-Level CSS Menu

JavaScript
1

Hello everyone,

I’m brand new to JavaScript/jQuery, and I’m trying to build a navigation menu in HTML/CSS with hide/show script in jQuery.

this is my JavaScript now:


<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/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()
{  $('.pMenu > li').bind('mouseover', jsddm_open)
   $('.pMenu > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;
</script>

that sits right inside the <head> tag.

These are the CSS styles:


/********************/
/*PERSONAL NAV MENU**/
/********************/
.pWrapper{
	padding-bottom:53%;
	padding-left:14%;
}
.pMenu{
	margin:0;
	padding:0;
	list-style:none;
}

/*IE 6 & 7 need inline block feature*/
ul.pMenu ul li a{
	width:100%;
	display:inline-block;
}
ul.pMenu ul li ul li a{
	width:100%;
	display:inline-block;
}
ul.pMenu ul li ul li ul li a{
	width:100%;
	display:inline-block;
}

/*top level li specifications*/
#health{
	width:8%;
	padding-right:2%;
}

#insurance{
	width:14.5%;
	padding-right:2%;
}

#shopping{
	width:14%;	
	padding-right:2%;
}

#dating{
	width:11%;
	padding-right:2%;
}

#education{
	width:15.5%;
}

/*begin main list attributes*/
ul.pMenu > li:hover a{
	background:#F00;
	border:.33em ridge #C90;
	color:#FF0;
}
ul.pMenu li:hover > ul li a{
	width:10em;
	background:#CCC;
	border:.25em outset #999;
	height:1em;
	left:5.35em;
	font-size:12px;
	padding-left:4%;
	padding-right:10%;
	text-shadow:1px 1px 1px #000;
	color:#000;
	position:relative;
	display:block;
}
ul.pMenu li{
	float:left;
	list-style:none;
}

ul.pMenu li a{
	display:block;
	color:#FFF;
	background:#900;
	border:.33em ridge #C30;
	text-decoration:none;
	text-shadow:1px 1px 1px #000;
	white-space:nowrap;
	padding-top:.7em;
	padding-left:.3em;
	padding-right:.3em;
	padding-bottom:.7em;
}

ul.pMenu li a:hover{
	background:#F00;
	border:.33em ridge #C90;
	color:#FF0;
}

/*first sub-list*/
ul.pMenu li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

ul.pMenu li ul li{
	float:none;
	top:33px;
}

ul.pMenu li ul li a{
	width:10em;
	background:#CCC;
	border:.25em outset #999;
	height:1em;
	left:5.35em;
	font-size:12px;
	padding-left:4%;
	padding-right:10%;
	text-shadow:1px 1px 1px #000;
	color:#000;
	position:relative;
	display:block;
}

ul.pMenu li ul li a:hover{
	background:#999;
	border:.25em inset #666;
	text-decoration:blink;
}

/*second sub-list*/
ul.pMenu li ul li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
	display:none;
}

ul.pMenu li:hover > ul{
	visibility:visible;
}

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

ul.pMenu li ul li ul li a{
	width:auto;
	background:#999;
	border:.15em outset #666;
	text-shadow:1px 1px 1px #000;
	color:#FFF;
}

ul.pMenu li ul li ul li a:hover{
	background:#999;
	border:.15em inset #666;
	text-decoration:blink;
}

/*third sub-list*/
ul.pMenu li ul li ul li ul{
	margin:0;
	padding:0;
	position:absolute;
	visibility:hidden;
}

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

ul.pMenu li ul li ul li a{
	width:auto;
	background:#999;
	border:1% outset #666;
	text-shadow:1px 1px 1px #000;
	color:#FFF;
}

ul.pMenu li ul li ul li a:hover{
	background:#999;
	border:1% inset #666;
	text-decoration:blink;
}
/******************/
/*End Personal Nav*/
/******************/

How do I create a selector for my lower level lists? :shifty: