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

HTML Code:
	<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>

Code:
/* 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;
}