Css 悬停关闭时延迟转换

我有两个带有悬停过渡的菜单，涉及向中间滑动的菜单。我在想，当我停下来的时候，我怎么能延迟转换回到原来的位置呢？基本上，我希望在悬停关闭后将其保持在悬停状态几秒钟

网站：

这是我的菜单：

#nav_menu-2, #nav_menu-4 {
  padding-left:0;
  padding-right:0;
}
#nav_menu-2 li:hover{
  padding-right:80px;
}
#nav_menu-4 li:hover {
  padding-left:80px;
}
.sub-menu li:hover{
  padding-right:0 !important;
}
.sub-menu {
  position:absolute;
  background: rgba(31, 92, 139);
  background: rgba(31, 92, 139, .8);
  text-align:left;
  margin-top: -34px !important;
  right:20% !important;
  z-index: 9999999;
  display:none;
}
.widget .sub-menu {
  padding-left: 0;
}
.widget {
  border-bottom: 0;
  border-top: 0;
}
.widget a:hover {
  color: #ffffff;
}
.widget .menu a:link {
  color: #fff;
  padding: 10px 20px;
  text-transform: uppercase;
}
.widget li {
   font-size:1.7rem !important;
  -webkit-animation-delay: 0s !important; /* Chrome, Safari, Opera */
  animation-delay: 0s !important;
  transition: all 1s linear; 
  -webkit-transition: all 1s linear; 
}
.widget li:hover {
  background: none repeat scroll 0 0 #11334c;
  -webkit-animation-delay: 5s !important; /* Chrome, Safari, Opera */
  animation-delay: 5s !important;
  transition: all 1s linear; /* delays for 1 second */
  -webkit-transition: all 1s linear; /* for Safari & Chrome */
}
.widget li:hover ul {
  display:block;
}

---

谢谢

注意：

动画

！==<代码>转换，例如

动画延迟

！==<代码>转换延迟嘿，我不太确定我是否理解。你能再解释一下吗？thanks@JohnB. 现在元素上有了过渡。然后你尝试做一个动画延迟。您正在延迟一个不存在的动画。应该使用过渡延迟而不是动画延迟。