Trying to Maintain Hover Effect on Main List

JavaScript
1

Hello everyone,

In my home page menu, the blocks change color on the hover effect just fine and shows the first child menu, but when you hover over the child menu, the hover colors turn off of the main menu. I want to know how to maintain the hover effect through browsing the entire menu.

Here 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    = 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>

My CSS Styles for Menu:


/********************/
/*PERSONAL NAV MENU**/
/********************/
.pWrapper{
	padding-bottom:53%;	
}
.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-left:11%;
	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{
	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:auto;
	background:#CCC;
	border:.25em outset #999;
	font-size:95%;
	height:10%;
	font-size:12px;
	padding:2%;
	padding-left:4%;
	padding-right:10%;
	text-shadow:1px 1px 1px #000;
	color:#000;
	position:relative;
}

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*/
/******************/

My HTML portion for menu:


 <!-- begin Personal navigation menu -->
<div class="pWrapper">
<ul>
<ul class="pMenu">
	<li id="health" style="width:10%;"><a href="#">health</a>
    	<ul>
        	<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>  
</ul>                  	
</div>
	<!-- end Personal navigation menu-->
2

This is really a CSS thing. You haven’t followed advice elsewhere about how to structure this menu, but normally you would have a hover rule on the top-level LI, such as

li:hover a {hover styles here}

If you stick with this menu structure (with each main link as an UL, which is not a good idea) you could refine it with something like

ul.pMenu > li:hover a {hover styles here}
3

You are correct! :cool:

Now I’m trying to make the first sub-list make the shopping and insurance categories display their four <li>'s right on top of each other. they appear in a square. I want them to sit right on top of each other in a vertical line.