Weird Nav problem

When I hover over “About” and then hover over “Key Personnel” in the submenu, it widens the hover state of “About”. Really strange…

http://badesdesign.com/dev_msf/index.php
login to dev:
user: msf
pass:4321

	<nav>
		<ul class="mainNav">
			<li class="home"><a href="index.php">HOME</a></li>
			<li class="loan-production"><a href="loan-production.php">LOAN PRODUCTION</a></li>
	        <li class="recent-financings"><a href="recent-financings.php">RECENT FINANCINGS</a></li>
	        <li class="about"><a href="about.php">ABOUT</a>
	        	<ul class="subMenu">
	        		<li class="key-personnel"><a href="key-personnel.php">Key Personnel</a></li>
	        	</ul>
	
	        </li>
	        <li class="contact"><a href="contact.php">CONTACT</a></li>

<!-- END OF mainMenu --></ul> 
/* NAVIGATION */

.mainNav{
	z-index: 1;
	position: relative;
	background: #252469;
	float: left;
	height: 40px;
	width: 719px;
	text-align: center;
}

.mainNav li{
padding-top: 1px;
	float: left;
	position: relative;
	vertical-align: middle;
	line-height: 40px;
	font-size: 10pt;
	margin: 0 10px 0 10px;
}
	.mainNav li, .mainNav li a{
		display: block;
		height: 40px;
		position: relative;
		color: white;
	}
	
		.mainNav li a:hover, .homeBody .mainNav li.home a, .aboutBody .mainNav li.about a, .contactBody .mainNav li.contact a{
			position: absolute;
			top:-1px;
			left:0px;
			background-image: url('/dev_msf/images/hovers.png');
			height: 45px;
			color: #252469;
			padding-top: 3px;	
		}
		
		.financeBody .mainNav li.recent-financings a {
			width: 173px;
			position: absolute;
			top:-1px;
			left:0px;
			background-image: url('/dev_msf/images/hovers.png');
			height: 45px;
			color: #252469;
			padding-top: 3px;
			background-position: -246px 0px;	
		}
		.loanBody .mainNav li.loan-production a {
			width:161px;
			position: absolute;
			top:-1px;
			left:0px;
			background-image: url('/dev_msf/images/hovers.png');
			height: 45px;
			color: #252469;
			padding-top: 3px;
			background-position: -85px 0px;
		}
		
			.contactBody .mainNav li.contact a {
			width:98px;
			position: absolute;
			top:-1px;
			left:0px;
			background-image: url('/dev_msf/images/hovers.png');
			height: 45px;
			color: #252469;
			padding-top: 3px;
			background-position: -500px 0px;
			}

li.home a:hover{
	width:85px ;
	background-position: 0 0px;
}
	
li.home, li.home a{width: 85px;}

li.loan-production, li.loan-production a{
	width:161px ;
}
	li.loan-production a:hover{
		width:161px;
		background-position: -85px 0px;
	}

li.recent-financings, li.recent-financings a{
	width: 173px;
}

	li.recent-financings a:hover{
		width: 173px;
		background-position: -246px 0px;	
	}

li.about, li.about a{
	width:81px ;
}

	li.about a:hover{
		width:81px ;
		background-position: -419px 0px;	
	}

li.contact, li.contact a{
	width: 98px;
}

	li.contact a:hover{
		width: 98px;
		background-position: -500px 0px;	
	}
	

#underBar{
	margin: 0 auto;
	width: 1000px;
	margin-bottom: 7px;

}

	.social{
		padding-left: 15px;
	}

	.social li{
		float: left;
		margin: 8px 5px 0 5px;
		font-size: 10pt;
		color: #6e6f71;
	}

	.social li:first-child{
		margin: 15px 10px 0 10px;
	}
	
	#underBar p{
		margin: 10px 200px 0 0;
		float: right;
		font-size: 11pt;
		font-style: italic;
		color: #252469;
		font-weight: 100;
	}

/******** SUB MENU ************/
.mainNav li:hover a {
	position: absolute;
	top:-1px;
	left:0px;
	background-image: url('/dev_msf/images/hovers.png');
	height: 45px;
	color: #252469;
	padding-top: 3px;	
}

.mainNav li:hover .subMenu li.key-personnel a{background-image:none; position: static; color: white;}

.mainNav .subMenu{
	background: #252469;
	border: 1px solid black;
	padding: 10px;
	width: 115px;

	margin-left: -9999em;
	text-align: left;
	position: absolute;
	top:45px;
	left: 100px;;
}

.mainNav li:hover .subMenu{margin-left: -90px;}

.mainNav li.about .subMenu li.key-personnel{
	height: auto;

	line-height: normal;
}

.mainNav li.about .subMenu li.key-personnel a{
	background-image: none;
	height: auto;
	padding-top: 0px;
	color: white;
	width: auto;
	height: auto;
}

.mainNav li.about .subMenu li.key-personnel a:hover{
	color: #bc9d00;
	width: inherit;
	position: static;
}

Hi,

Try adding this after the original rules.


.mainNav li.about a {
background-position: -419px 0;
}

@Paul!

Can you please explain? These sort of issues are hard for me to troubleshoot sometimes.

Hi,

The top level nav changes its image on a:hover but when you move to the sublist the anchor is no longer hovered so any rules that you have for it will disappear.

The top level anchor is kept in the hovered state by rules applied to the list element on hover e.g. li:hover > a. That means that while the list is hovered the top level anchor will still remain visible even when on the sublist because that is all part of the parent list. However the anchor does not have the correct background-position applied now because you applied it to the hover of the anchor only.

The styles I supplied just ensure that the anchor has the background-position correct by default.

Great explanation, I’m curious though. What other element could you set the hover to so you can avoid this?

For a drop down menu like this you only really needed to cater for li:hover > a and not li > a:hover as they are doing much the same thing except that in the former ensures that when hovering the list the anchor stays in the highlighted state while also traversing the submenu.