0
我有一個下拉導航菜單的小問題。jQuery下拉導航菜單
將鼠標懸停在具有子菜單的項目上時,會激活懸停狀態,並且子菜單正確下拉。但是,一旦將鼠標放入子菜單中,原始菜單項將從懸停背景顏色恢復爲原始狀態。
當進入子菜單時,有沒有辦法讓後臺懸停狀態保持不變?爲了使它複雜化,帶子菜單的每個菜單項都是不同的顏色。
HTML:
<nav id="topNav">
<ul>
<li><a href="#" title="About">About</a></li>
<li id="learn"><a href="#" title="Learn">Learn</a>
<ul>
<li><a href="#" title="News">News</a></li>
<li><a href="#" title="Research">Research</a></li>
<li><a href="#" title="Simulcasts">Simulcasts</a></li>
<li><a href="#" title="Fellowships">Fellowships</a></li>
<li><a href="#" title="Internships">Internships</a></li>
</ul>
</li>
<li id="connect"><a href="#" title="Connect">Connect</a>
<ul>
<li><a href="#" title="News">News</a></li>
<li><a href="#" title="Research">Research</a></li>
<li><a href="#" title="Simulcasts">Simulcasts</a></li>
<li><a href="#" title="Fellowships">Fellowships</a></li>
<li><a href="#" title="Internships">Internships</a></li>
</ul>
</li>
<li id="invest"><a href="#" title="Invest">Invest</a>
<ul>
<li><a href="#" title="News">News</a></li>
<li><a href="#" title="Research">Research</a></li>
<li><a href="#" title="Simulcasts">Simulcasts</a></li>
<li><a href="#" title="Fellowships">Fellowships</a></li>
<li><a href="#" title="Internships">Internships</a></li>
</ul>
</li>
</ul>
</nav>
JS:
(function($){
$(document).ready(function() {
//cache nav
var nav = $("#topNav");
//add hover animations to submenu parents
nav.find("li").each(function() {
if ($(this).find("ul").length > 0) {
//show subnav on hover
$(this).mouseenter(function() {
$(this).find("ul").stop(true, true).slideDown(200);
});
//hide submenus on exit
$(this).mouseleave(function() {
$(this).find("ul").stop(true, true).slideUp(50);
});
}
});
});
CSS:
nav { display:block; position:relative; z-index: 600;
nav ul { padding:0; margin:0; }
nav li { position:relative; float:left; list-style-type:none; }
nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
nav li a { display:block; width: 68px; padding: 18px 35px 53px 9px; color:#fff; border-right: 1px solid #D0D2D3; text-decoration:none; }
nav li a:focus { outline:none; text-decoration:underline; }
nav a span { display:block; float:rightright; }
nav a:hover { background-color: #e5e6e7; color: #4D4D4D; }
nav ul ul { display:none; position:absolute; left:0; }
nav ul ul li { float:none; }
nav ul ul a { width: 199px; padding:13px; border-right:none; border-bottom: 1px solid #fff; }
nav ul li:nth-child(2) { background-image: url('../images/nav-turquoise.png'); background-repeat: no-repeat; background-position: top right; }
nav ul li:nth-child(3) { background-image: url('../images/nav-purple.png'); background-repeat: no-repeat; background-position: top right; }
nav ul li:nth-child(4) { background-image: url('../images/nav-orange.png'); background-repeat: no-repeat; background-position: top right; }
nav ul li:nth-child(2) a:hover { background-color: #14C7C4; color: #4D4D4D; background-image: url('../images/nav-grey.png'); background-repeat: no-repeat; background-position: top right; }
nav ul li:nth-child(3) a:hover { background-color: #A36CC8; color: #4D4D4D; background-image: url('../images/nav-grey.png'); background-repeat: no-repeat; background-position: top right; }
nav ul li:nth-child(4) a:hover { background-color: #FBB600; color: #4D4D4D; background-image: url('../images/nav-grey.png'); background-repeat: no-repeat; background-position: top right; }
#learn ul li { background-color: #14C7C4; background-image: none; }
#connect ul li { background-color: #A36CC8; background-image: none; }
#invest ul li { background-color: #FBB600; background-image: none; }
#learn ul li a:hover { background-color: #27a3a4; color: #fff; background-image: none; }
#connect ul li a:hover { background-color: #865e97; color: #fff; background-image: none; }
#invest ul li a:hover { background-color: #d39b13; color: #fff; background-image: none; }
啊當然了,謝謝! – bunkmoreland