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?
/********************/
/*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:
<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!