鼠标移出时，二级导航会被跟踪几秒钟答案

【问题标题】：Second level nav get stalked for couple seconds on mouse out鼠标移出时，二级导航会被跟踪几秒钟
【发布时间】：2016-02-16 18:59:52
【问题描述】：

我正在为我的网站使用 Foundation 6。我的顶栏有问题。在鼠标悬停时出现第二级导航。但是，它需要几秒钟才能在鼠标移出时消失。它看起来像被跟踪了。

HTML：

<nav class="top-bar main-nav" id="top-bar-menu">
  <div class="row main-nav">
    <div class="top-bar-left">
      <ul class="vertical medium-horizontal menu menu-items" data-responsive-menu="accordion medium-dropdown">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a>
          <ul class="menu vertical nested">
            <li><a href="#">Item 2A</a></li>
            <li><a href="#">Item 2B</a></li>
          </ul>
        </li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
      </ul>
    </div>  
  </div>
</nav>

CSS：

.top-bar, .top-bar ul {background-color: #8d3895; padding-top: 0; padding-bottom: 0;}

nav.main-nav .dropdown.menu .is-dropdown-submenu-parent.is-right-arrow > a::after {border-style: none;}

nav.main-nav .dropdown.menu .is-dropdown-submenu-parent a::after { 
  margin-left: 0;}

nav.main-nav .dropdown.menu .is-dropdown-submenu-parent ul {margin-left:0;
  border-top:0; margin-top: 0; padding-left: 0; padding-right: 0; background: #fce2d1;}

.dropdown.menu .submenu {min-width: 100%;}

nav.main-nav .is-submenu-item.is-dropdown-submenu-item {padding-right: 0;}

nav.main-nav.top-bar {padding:0; background-color: #8d3895;}

nav div.top-bar-left {width: 95%;}

nav.main-nav.top-bar ul li {
  text-align: center;} 

.menu > li:not(.menu-text) > a {
  display: block;
  line-height: 1;
  padding: 0.7rem 0;}

nav.main-nav.top-bar ul li a {
  font-family: Source Sans Pro;
  font-size: 1.35em;
  color: #ffffff;
  padding-right: 0.75em;}

nav.main-nav.top-bar ul li a:hover {
  font-size: 1.35em;
  color: #4a8ac9;
  background-color: #ffffff;
  width: inherit;} 

nav.main-nav.top-bar ul li ul li a:hover {
  font-size: 1.35em;
  color: #333333;
  background: #f68b1f;
  width: inherit;}

/*Submenu items*/
nav.main-nav.top-bar .is-active a {
  background-color: #ffffff;
  color: #4a8ac9;}

div.search-bar {padding: 1em 0;}

.top-bar input {width: auto!important;}

【问题讨论】：

标签： jquery css zurb-foundation zurb-foundation-6

【解决方案1】：

mouseleave 的默认关闭时间为500 毫秒，由defaults 对象的closingTime 属性定义，可以通过Foundation 对象的DropdownMenu 函数访问。如果那是一口，下图描述了我的意思：

您可以覆盖此值，但必须在调用$(document).foundation(); 之前完成。此更改将应用于所有下拉菜单，除非您使用 data-closing-time 属性明确覆盖该行为：

Foundation.DropdownMenu.defaults.closingTime = 0;
$(document).foundation();

使用data-closing-time 属性的示例：

<ul class="vertical medium-horizontal menu menu-items" data-closing-time="0" data-responsive-menu="accordion medium-dropdown">

Fiddle example

【讨论】：