html - 导航子菜单在悬停时切换到其他子菜单

Question

我有一个导航菜单，我正试图开始工作，但只要我将鼠标悬停在它上面，子菜单就会不断切换到另一个子菜单。我怎样才能得到它，以便当我将鼠标悬停在它上面时正确的菜单保持不变？

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

和 HTML:

<nav class="head_nav">
<div class="hoverBar" >
<ul class="mainmenu">
<li class="active"><a href="">About</a>
    <ul style="background-color: red;">
        <li><a href="#">Mission</a></li>
        <li><a href="#">Board Members</a></li>
        <li><a href="#">Staff</a></li>
        <li><a href="#">Members</a></li>
        <li><a href="#">Task Forces</a></li>
            </ul>
    </li>
<li><a href="">Events</a>
    <ul style="background-color: green;">
        <li><a href="#">Description</a></li>
        <li><a href="#">Registration with Outlook ICS</a></li>
        <li><a href="#">Online Payment</a></li>
        <li><a href="#">Email auto-reminders</a></li>
        <li><a href="#">Multiple registrants allowed</a></li>
            </ul>
    </li>
<li><a href="">Galleries</a>
        <ul style="background-color: blue;">
        <li><a href="#">EXAMPLE: Executive Board</a></li>
        <li><a href="#">EXAMPLE: Single Page or Blog Page</a></li>
        <li><a href="#">EXAMPLE: Photo Gallery</a></li>
            </ul>
        </li>
<li><a href="">Educational Resources</a></li>
<li><a href="">Economic Development</a>
        <ul style="background-color: yellow;">
        <li><a href="#">Major Corporations/Global Businesses</a></li>
        <li><a href="#">Maps</a></li>
        <li><a href="#">Available Properties</a></li>
        <li><a href="#">Communities Represented</a></li>
        <li><a href="#">Demographics</a></li>
        <li><a href="#">Workforce</a></li>
        <li><a href="#">Taxes</a></li>
        <li><a href="#">Transportation</a></li>
        <li><a href="#">Utilities</a></li>
        <li><a href="#">Incentives &amp; Financing</a></li>
        <li><a href="#">Report and Publications</a></li>
                    </ul>               
    </li>
</li>
<li><a href="">Media Room</a>
    <ul>
        <li class="first"><a href="#">Press Releases</a></li>
        <li><a href="#">Media Kit Information</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Link to Logo &amp; Standards</a></li>
        <li><a href="#">Link to Photo Gallery</a></li>
        <li><a href="#">Twitter, Facebook, LinkedIn, Flickr</a></li>
        <li><a href="#">Speakers Bureau List/info</a></li>
        <li><a href="#">Fact Sheet</a></li>
        <li class="last"><a href="#">Media Relations Contact</a></li>
    </ul>
</li>
<li><a href="">Job Bank</a>
    <ul id="jobBank">
        <li class="first"><a href="#">Member Add/Edit/Delete</a></li>
        <li class="last"><a href="#">Time Expire</a></li>
    </ul>
</li>
</ul>
<div class="floatr"></div>
</div>
</nav>

Answer 1

从 ul li ul 中删除 opacity: 0。将其替换为 display: none;。从 ul li:hover ul 中移除 opacity: 1。将其替换为 display: block;。目前，所有的子导航都在那里，只是你看不到它们。将它们设置为 display: none; 默认情况下只会在父导航元素悬停时显示正确的元素，并且会消除您遇到的问题。 http://jsfiddle.net/SHQwm/5/