Navigation submenu switches to other submenu on hover - html

Question

I have a navigation menu that I'm trying to get to work, but the submenus keep switching to another submenu whenever I hover over it. How can I get it so that the right menu stays up when I hover over it?
jsfiddle: http://jsfiddle.net/SHQwm/
.hoverBar {
position: relative;
border: 1px solid #d6d6d6;
background: #fff;
padding: 15px 20px;
height: 100px;
}
ul {
margin: 0;
padding: 0;
width: 1152px;
}
.mainmenu > li {
list-style: none;
float:left;
text-align: center;
}
ul.mainmenu > li a {
font-family: 'Open Sans', sans-serif;
padding: 0 10px;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
}
ul li ul {
opacity: 0;
transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-webkit-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
list-style-type: none;
text-align: left;
float: left;
width: 100%;
position: absolute;
z-index: 60;
left: 0;
padding-top: 30px;
}
ul li:hover ul {
opacity: 1;
}
ul li ul li {
float: left;
text-align: left;
border-top: #4c4c4c 1px solid;
border-bottom: #303030 1px solid;
border-radius: 2px;
margin-bottom: 0;
padding: 10px 0;
white-space: nowrap;
width: auto;
}
ul li ul li:hover {
background-color: #008000;
}
.floatr {
position: absolute;
top: 10px;
z-index: 50;
width: 100px;
height: 30px;
background : #ebebeb;
opacity: 0.25;
-ms-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
border-top: solid 1px #00aced;
border-bottom: solid 1px #00aced;
}
.mainmenu > li:hover > a {
opacity: 1;
}
ul li ul li a {
display: block;
padding: 0px;
line-height: 14px;
font-size: 12px;
color: #000;
font-family: 'Open Sans', sans-serif;
text-transform: none !important;
text-align: left;
}
ul li:hover ul li {
display:block;
}
.mainmenu {
height: 100px;
}
#jobBank {
left: 450;
width: 210px;
}
And the HTML:
<nav class="head_nav">
<div class="hoverBar" >
<ul class="mainmenu">
<li class="active">About
<ul style="background-color: red;">
<li>Mission</li>
<li>Board Members</li>
<li>Staff</li>
<li>Members</li>
<li>Task Forces</li>
</ul>
</li>
<li>Events
<ul style="background-color: green;">
<li>Description</li>
<li>Registration with Outlook ICS</li>
<li>Online Payment</li>
<li>Email auto-reminders</li>
<li>Multiple registrants allowed</li>
</ul>
</li>
<li>Galleries
<ul style="background-color: blue;">
<li>EXAMPLE: Executive Board</li>
<li>EXAMPLE: Single Page or Blog Page</li>
<li>EXAMPLE: Photo Gallery</li>
</ul>
</li>
<li>Educational Resources</li>
<li>Economic Development
<ul style="background-color: yellow;">
<li>Major Corporations/Global Businesses</li>
<li>Maps</li>
<li>Available Properties</li>
<li>Communities Represented</li>
<li>Demographics</li>
<li>Workforce</li>
<li>Taxes</li>
<li>Transportation</li>
<li>Utilities</li>
<li>Incentives & Financing</li>
<li>Report and Publications</li>
</ul>
</li>
</li>
<li>Media Room
<ul>
<li class="first">Press Releases</li>
<li>Media Kit Information</li>
<li>Blog</li>
<li>Link to Logo & Standards</li>
<li>Link to Photo Gallery</li>
<li>Twitter, Facebook, LinkedIn, Flickr</li>
<li>Speakers Bureau List/info</li>
<li>Fact Sheet</li>
<li class="last">Media Relations Contact</li>
</ul>
</li>
<li>Job Bank
<ul id="jobBank">
<li class="first">Member Add/Edit/Delete</li>
<li class="last">Time Expire</li>
</ul>
</li>
</ul>
<div class="floatr"></div>
</div>
</nav>

Answer 1

Remove opacity: 0 from ul li ul. Replace it with display: none;. Remove opacity: 1 from ul li:hover ul. Replace it with display: block;. Currently, all of the subnavigations are there, you just can't see them. Setting them to display: none; by default will only display the correct one when the parent navigation element is hovered and will remove the issue you're having. http://jsfiddle.net/SHQwm/5/