0
我有一個導航菜單，我試圖去上班，但子菜單隨時切換到另一個子菜單，只要我將鼠標懸停在上面。我怎樣才能得到它，這樣當我把鼠標懸停在右邊的菜單上時，菜單會保持不變？導航子菜單切換到其他子菜單上懸停
的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 & 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 & 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>
任何人都可以提供幫助嗎？ –