When Mouse Leaves Div Area, Links Take on Parent Links' Style

HTML & CSS
1

Hello all,

This pertains to the drop-down menu on the World Review Group home page. After I coded the transition delay for the drop-down menu for when the mouse leaves the #pMenu div area and when that occurs, the child links take on the styles of the parent list items/links.

The cause may have to be due somewhat to the following CSS target on the #pMenu drop-down:


#pMenu li:hover li a{

I think that’s it, but I don’t know what to change it to. Any suggestions? (:

-Tyler

2

In your CSS, you have only defined styles for your drop down list on hover, which is a problem now that you are using transitions. Change this block of CSS code:

#pMenu li:hover li a{
       color:#039;
	   text-decoration:underline;
	   text-shadow:none;
       background:none;
       filter:none;
       border:none;
       font-size:12px;
       display:inline;
}
#pMenu li:hover li a:hover, #pMenu li:hover li a:focus, #pMenu li:hover li a:active{
	text-decoration:none;
	color:#069;
}

#pMenu div a:hover, #pMenu div a:focus, #pMenu div a:active{
	color:#0F0;
	background:none;
	filter:none;
	border:none;
}

to this:

#pMenu li li a, #pMenu li:hover li a{
       color:#039;
	   text-decoration:underline;
	   text-shadow:none;
       background:none;
       filter:none;
       border:none;
       font-size:12px;
       display:inline;
}
#pMenu li li a:hover, #pMenu li li a:focus, #pMenu li li a:active,
#pMenu li:hover li a:hover, #pMenu li:hover li a:focus, #pMenu li:hover li a:active{
	text-decoration:none;
	color:#069;
}

#pMenu div a, #pMenu div a:hover, #pMenu div a:focus, #pMenu div a:active{
	color:#0F0;
	background:none;
	filter:none;
	border:none;
}

#pMenu div h2 a {color: #339; text-decoration: underline;}
3

Yes, these changes are necessary because the styles are unaccounted for when the main-level list-items lose their :hover states.

The timer function does create a usability issue, though, which I don’t if there is a way this can be fixed. When you browse through the drop-down menus from right-to-left, one menu will overlap the next one as it goes through its transition delay time to remove its visibility. Can CSS be used to stop this?

You may have already known this was going to happen, but it may be worth it to just remove the transition delay after all.