徘徊时延迟转换

时间:2014-12-15 15:45:46

标签: css menu hover delay transition

我有两个悬停过渡菜单,涉及菜单向中间滑动。我想知道如何在徘徊时延迟过渡到原来的位置?基本上,我希望在徘徊之后将其保持在悬停状态几秒钟。

网站:http://chemipharmaceutical.com/wp/

这是我的菜单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;
}

谢谢

0 个答案:

没有答案