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;
}