Hello everyone,

I have a home page menu that has 4 nested lists one menu. I am trying to style the menu with CSS and make the lists display on hover with JavaScript / jQuery.

Right now, the menu displays a hover effect on the top level, but when I move down to navigate the first sub-list, the menu disappears (like it shouldn't do). How can I refine my CSS to allow JavaScript to show all these lists?

Code:
/********************/
/*PERSONAL NAV MENU**/
/********************/
.pWrapper {
    padding-bottom:53%;
    padding-left:8%;
}
.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%;
	margin-right:2%;
}
#insurance {
    width:14.5%;
    padding-right:2%;
	margin-right:2%;
}
#shopping {
    width:14%;
    padding-right:2%;
	margin-right:2%;
}
#dating {
    width:11%;
    padding-right:2%;
	margin-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 {
    float:left;
    list-style:none;
	margin-right:2%;
}

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:hover > ul li a {
    width:10em;
    background:#CCC;
    border:.25em outset #999;
    height:1em; 
    font-size:12px;
    padding-left:4%;
    padding-right:10%;
    text-shadow:1px 1px 1px #000;
    color:#000;
    position:relative;
    display:block;
}

ul.pMenu li{
	margin-right:.2em;
}

ul.pMenu li li{
	margin-right:0;
}

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;
    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*/
/*****************/
this is my JavaScript:

Code:
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout    = 1000;
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').hover(jsddm_open, jsddm_timer)
   $('.pMenu > li > ul').hover(jsddm_open, jsddm_timer)});

document.onclick = jsddm_close;
</script>
I hope I finish this menu soon!