Javascript CSS子菜单不再悬停时延迟隐藏

我有一个只使用HTML和CSS构建的菜单，现在没有用于菜单的JavaScript

下图显示了将父菜单悬停在上方时打开/展开的子菜单。在此示例中，父菜单项是服务LIA菜单项

因此，现在当您悬停父菜单项Services时，它会使子菜单进入视图，如下图所示。将光标移离父菜单项或子菜单项本身后，它会立即再次隐藏子菜单

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

更新
我已经提取了菜单的CSS，并将其放在下面，还制作了一个带有工作代码的JSFIDLE页面

这是菜单的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中：

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

---

以下是显示浏览器兼容性的图表：

将此添加到子菜单的CSS中：

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

---

以下是显示浏览器兼容性的图表：

删除您的

动画

，

显示

和

转换延迟

属性。改为添加过渡：分别添加所有0.5秒、0秒和可见性（过渡延迟为零）

正文{
背景#40C8F4；
}
导航ul，导航ol{
列表样式：无；
列表样式图像：无；
}
#头部导航菜单{
浮动：对；
利润上限：23px；
}
#头导航菜单李{
浮动：左；
位置：相对位置；
填充：0 2px 0 2px；
}
.导航a{
字体系列：“arial”；
字号：18px；
填充：8px 18px；
-webkit边界半径：4px；
-moz边界半径：4px；
边界半径：4px；
空白：nowrap；
颜色：#fff；
不透明度：0.9；
字母间距：1px；
文字装饰：无；
显示：块；
}
.菜单联系a{
边框：2倍实心#FFF；
填充：8px 18px；
过渡：0.05s线性；
-moz跃迁：0.05s线性；
-webkit转换：0.05s线性；
}
.nav.菜单联系人a:悬停{
背景色：#FFF；
颜色：#7979；
}
#导航ula{
字号：100；
显示：块；
}
.导航a:悬停，
.nav>.active a{
不透明度：1；
背景色：#3DBCE6；
}
.nav>.active li a{
背景色：继承；
}
蒂尼纳夫先生{
显示：无；
宽度：100%；
边缘顶部：.5em；
边缘底部：.6em；
}
.导航按钮a{
背景色：rgba（255，255，255，0.1）；
边框：2倍实心#FFF；
边界半径：4px；
边缘顶部：5px；
填充：8px 18px；
字体系列：“ProximaNova bold”，Helvetica，Arial，无衬线；
字体大小：正常；
左边距：16像素；
颜色：#FFF！重要；
}
.导航按钮a:悬停{
背景色：#FFF；
不透明度：1；
颜色：#444！重要；
}
/*导航>下拉菜单*/
#导航下拉菜单，
#导航儿童{
可见性：隐藏；
填充：0；
位置：绝对位置；
z指数：99999；
边框：1px实心#86DEFC；
宽度：333%；
右：2px；
/*左：-239%*/
顶部：38px；
过渡：所有0.5秒到0秒；
背景色：#F2F9FC；
}
#导航下拉菜单li{
宽度：195px；
浮动：左；
显示：内联块；
/*宽度：50%*/
}
.nav.下拉菜单a{
颜色：#030303；
}
#导航李：悬停>ul，
#导航ul li:悬停>ul，
.下拉列表：悬停>ul{
能见度：可见；
背景色：#fff；
颜色：#000；
边框：1px实心#E9E9E9；
边界顶部：无；
页边顶部：1px；
}
#导航下拉菜单ul，
#海军儿童保险公司{
左：99.75%；
顶部：-1px；
}
#李国荣，
#李国宝{
左边距：0；
}
#李海军：第一个孩子，
#李海军：第一个孩子{
边界顶部：无；
}
#nav ul a，
#导航ula{
字体大小：14px；
线高：21px；
文本对齐：左对齐；
填充：10px；
显示：内联块；
最小宽度：125px；
边框底部：无；
页边距底部：0！重要；
宽度：100%；
字母间距：1px；
字体系列：arial；
}
#导航：悬停，
#导航：悬停{
颜色：#098EB9！重要；
背景：无；
}
#导航ul下拉菜单a：悬停{
宽度：100%；
颜色：#63E924！重要；
边框底部：无；
}
#导航李。当前页面项目ul a，
#导航li.current-menu-parent ul a，
#导航李当前页面父级ul a{
颜色：#000；
字号：700；
}
#nav ul li.current-菜单项a{
颜色：#e9242e！重要；
}
#头部导航菜单。导航位置：悬停a.下拉切换{
背景：#fff；
颜色：#000；
不透明度：1；
右边框：1px实心#E7E7E7；
}
.nav.下拉菜单a:悬停{
不透明度：1；
背景色：#fff；
}
#导航下拉菜单li：悬停{
背景：#f8f8；
}

删除您的

动画

、

显示

和

转换延迟

属性。改为添加过渡：分别添加所有0.5秒、0秒和可见性（过渡延迟为零）

正文{
背景#40C8F4；
}
导航ul，导航ol{
列表样式：无；
列表样式图像：无；
}
#头部导航菜单{
浮动：对；
利润上限：23px；
}
#头导航菜单李{
浮动：左；
位置：相对位置；
填充：0 2px 0 2px；
}
.导航a{
字体系列：“arial”；
字号：18px；
填充：8px 18px；
-webkit边界半径：4px；
-moz边界半径：4px；
边界辐射