当主导航中的链接悬停时,我有一个subnav淡入和subnav动画的全宽背景。如何在将主导航停留在子导航栏上时保持子导航打开。当您未在主菜单项上时,子窗体将关闭。
<nav class="header-menu menu">
<ul>
<li class="menu-item-has-children">
<a href="#">
<span class="nav-text">Expertise</span>
<span class="icon-down-arrow-small "></span>
</a>
<ul class="sub-menu">
<li><a href="">Meet our Team</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Our Process</a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">
<span class="nav-text">Projects</span>
<span class="icon-down-arrow-small "></span>
</a>
<ul class="sub-menu">
<li><a href="">Meet our Team</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Our Process</a></li>
<li><a href="">Our Process</a></li>
<li><a href="">Our Process</a></li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Insights</a>
</li>
<li>
<a href="#">Careers</a>
</li>
</ul>
</nav>
$(".nav-text").mouseenter(function(){
var that = this;
var subNavHeight = $(that).parent().siblings('.sub-menu').outerHeight();
$(that).parent().parent().siblings().children('.sub-menu').stop().animate({opacity: 0}, 100);// fade out all sub-menus
$('.menu-expand').stop().animate({height:subNavHeight},200, "linear", function(){
$(that).parent().siblings('.sub-menu').stop().animate({opacity: 1}, 200);
});
});