javascript - 当不再悬停时延迟隐藏 CSS 子菜单

Question

我有一个仅使用 HTML 和 CSS 构建的菜单，目前菜单中没有使用 JavaScript。

下图显示了将鼠标悬停在父菜单上时打开/展开的子菜单。在此示例中，父菜单项是 Services LI A Menu item

现在，当您将鼠标悬停在父菜单项服务上时，它会显示子菜单，如下图所示。一旦您将光标从父菜单项或子项本身移开，它就会立即再次隐藏子菜单。

我的目标是通过某种方式修改它，使子菜单在几秒钟后隐藏而不是立即隐藏。如果我必须使用 JavaScript 来实现这个目标，那很好。如果可能的话，我更喜欢仅使用 CSS 的解决方案，但我只是不知道这是否可能。

更新
我已经提取了菜单的 CSS 并将其放在下面，并在此处使用工作代码制作了一个 JSFiddle 页面 http://jsfiddle.net/9mX2L/2/

这是菜单的 HTML...

<nav id="head-nav-menu" class="nav-main" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
  <ul id="nav" class="nav nav-pills">
    <li class="active menu-home"><a href="/">Home</a>
    </li>
    <li class="menu-about"><a href="/about/">About</a>
    </li>
    <li class="menu-projects"><a href="/projects/">Projects</a>
    </li>
    <li class="menu-blog"><a href="/blog/">Blog</a>
    </li>
    <li class="dropdown menu-services"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="/services/">Services <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li class="menu-consulting"><a href="/services/consulting/">Consulting</a>
        </li>
        <li class="menu-magento-development"><a href="/services/magento-development/">Magento Development</a>
        </li>
        <li class="menu-wordpress-development"><a href="/services/wordpress-development/">WordPress Development</a>
        </li>
        <li class="menu-sugarcrm-development"><a href="/services/sugarcrm-development/">SugarCRM Development</a>
        </li>
        <li class="menu-web-development"><a href="/services/web-development/">Web Development</a>
        </li>
        <li class="menu-seo"><a href="/services/seo/">SEO</a>
        </li>
      </ul>
    </li>
    <li class="menu-contact"><a href="/contact/">Contact</a>
    </li>
  </ul>
</nav>

CSS

body{
background: #40C8F4;
}
nav ul, nav ol {
list-style: none;
list-style-image: none;
}
#head-nav-menu{
  float: right;
  margin-top: 23px;
}
#head-nav-menu li {
  float: left;
  position: relative;
  padding: 0 2px 0 2px;
}
.nav a {
  font-family: 'arial';
  font-size: 18px;
  padding: 8px 18px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  white-space: nowrap;
  color: #fff;
  opacity: 0.9;
  letter-spacing: 1px;
    text-decoration: none;
    display: block;
}
.menu-contact a {
  border: 2px solid #FFF;
  padding: 8px 18px;
  transition: 0.05s linear;
  -moz-transition: 0.05s linear;
  -webkit-transition: 0.05s linear;
}
.nav .menu-contact a:hover {
  background-color: #FFF;
  color: #797979;
}
#nav ul a {
  font-weight: 100;
    display: block;
}
.nav a:hover,
.nav > .active a {
  opacity: 1;
  background-color: #3DBCE6;
}
.nav > .active li a {
  background-color: inherit;
}
.tinynav {
  display: none;
  width: 100%;
  margin-top: .5em;
  margin-bottom: .6em;
}
.nav li.button a {
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid #FFF;
  border-radius: 4px;
  margin-top: 5px;
  padding: 8px 18px;
  font-family: 'ProximaNova-bold', Helvetica, Arial, sans-serif;
  font-weight: normal;
  margin-left: 16px;
  color: #FFF !important;
}
.nav li.button a:hover {
  background-color: #FFF;
  opacity: 1;
  color: #444 !important;
}


/* Navigation > Dropdown Menus */
#nav .dropdown-menu,
#nav .children {
  display: none;
  padding: 0;
  position: absolute;
  z-index: 99999;
  border: 1px solid #86DEFC;
  width: 333%;
  right: 2px;
  /* left: -239%; */
  top: 38px;
  background-color: #F2F9FC;
}
#nav .dropdown-menu li {
  width: 195px;
  float: left;
  display: inline-block;
  /*width: 50%;*/
}
.nav .dropdown-menu a {
  color: #030303;
}
#nav li:hover > ul,
#nav ul li:hover > ul,
.dropdown:hover > ul {
  display: inline-block;
  -webkit-animation: fadeDown 250ms ease;
  -moz-animation: fadeDown 250ms ease;
  -ms-animation: fadeDown 250ms ease;
  -o-animation: fadeDown 250ms ease;
  animation: fadeDown 250ms ease;
  background-color: #fff;
  color: #000;
  border: 1px solid #E9E9E9;
  border-top: none;
  margin-top: 1px;
transition-delay: 9s;
-webkit-transition-delay: 9s; /* Safari */
}
#nav .dropdown-menu ul,
#nav .children ul {
  left: 99.75%;
  top: -1px;
}
#nav ul li,
#nav ul ul li {
  margin-left: 0;
}
#nav ul li:first-child,
#nav ul ul li:first-child {
  border-top: none;
}
#nav ul a,
#nav ul ul a {
  font-size: 14px;
  line-height: 21px;
  text-align: left;
  padding: 10px;
  display: inline-block;
  min-width: 125px;
  border-bottom: none;
  margin-bottom: 0 !important;
  width: 100%;
  letter-spacing: 1px;
  font-family: arial;
}
#nav ul a:hover,
#nav ul ul a:hover {
  color: #098EB9 !important;
  background: none;
}
#nav ul ul.dropdown-menu a:hover {
  width: 100%;
  color: #63E924 !important;
  border-bottom: none;
}
#nav li.current_page_item ul a,
#nav li.current-menu-parent ul a,
#nav li.current_page_parent ul a {
  color: #000;
  font-weight: 700;
}
#nav ul li.current-menu-item a {
  color: #e9242e !important;
}
#head-nav-menu .nav li:hover a.dropdown-toggle {
  background: #fff;
  color: #000;
  opacity: 1;
  border-right: 1px solid #E7E7E7;
}
.nav .dropdown a:hover {
  opacity: 1;
  background-color: #fff;
}
#nav .dropdown-menu li:hover {
  background: #F8F8F8;
}

Answer 1

将此添加到子菜单的 CSS:

transition-delay: 2s;
-webkit-transition-delay: 2s; /* Safari */

这是一个显示浏览器兼容性的图表:CanIUse CSS3 Transitions