У меня небольшая проблема с выпадающим меню навигации.
При наведении курсора на элемент с подменю активируется состояние наведения, и подменю правильно опускается. Но как только вы наведите курсор мыши на подменю, исходный пункт меню изменит цвет фона при наведении на исходное состояние.
Есть ли способ сохранить то же состояние наведения фона при входе в подменю? Чтобы усложнить это, каждый пункт меню с подменю также имеет свой цвет.
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; }