Hello everyone,
I am really pressing on to finish this home page menu, and I’m trying to find out why this odd behavior is occurring. There is obviously some conflicting code in my CSS. You can see this odd behaving menu for yourself at productreviewsbytyler.com. The other thing I’m trying to learn how to do is how to get the 3rd and 4th level lists to appear on the parent item’s hover.
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>
Now my CSS styles:
/********************/
/*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*/
/*****************/
100% Valid HTML lists:
<!-- begin Personal navigation menu -->
<div class="pWrapper">
<ul class="pMenu">
<li id="health" style="width:10%;"><a href="#">health</a>
<ul style="left:14.35em;">
<li><a href="#">weight loss</a>
<ul>
<li><a href="#">fitness</a>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><a href="#">dieting</a>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">skin care</a>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="pMenu">
<li id="insurance"><a href="#">insurance</a>
<ul>
<li><a href="#">property insurance</a>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><a href="#">auto insurance</a>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><a href="#">health insurance</a>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><a href="#">annuities</a>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="pMenu">
<li id="shopping"><a href="#">shopping</a>
<ul>
<li><a href="#">electronics</a>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><a href="#">style & fashion</a>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><a href="#">food/dining</a>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><a href="#">cars/auto</a>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="pMenu">
<li id="dating"><a href="#">dating</a>
<ul>
<li><a href="#">RealMatureSingles</a></li>
<li><a href="#">SeniorPeopleMeet</a></li>
</ul>
</li>
</ul>
<ul class="pMenu">
<li id="education"><a href="#">education</a>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
</ul>
</div>
<!-- end Personal navigation menu-->