我正在创建一个CSS动态菜单,并希望延迟悬停操作.菜单在悬停在其链接上时的反应是提供子菜单(下拉菜单).
我想减慢下拉过程,以便子菜单不会立即出现,但需要1秒才能下拉.非常感谢帮助.
代码如下:
<html>
<head>
<style>
#navMenu{
margin:0;
padding:0;
}
#navMenu ul{
margin:0;
padding:0;
}
#navMenu li{
margin-right:2px;
padding:0;
list-style:none;
float:left;
position:relative;
background:#CCC;
}
#navMenu ul li a{
text-align:center;
font-family:sans-serif, cursive;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#000;
border:10px;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#navMenu ul li:hover ul{
visibility:visible;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
</style>
</head>
<body>
<div id="wrapper"><!--beginning of wrapper div-->
<div id="navMenu"><!--Beginning of Nav Menu-->
<ul><!--Beginning of main UL-->
<li><a href="#">About Us</a>
<ul><!--Begining of Internal UL-->
<li><a href="#">Link item </a></li>
<li><a href="#">Link item </a></li>
<li><a href="#">Link item </a></li>
<li><a href="#">Link item </a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul><!--End of Main UL --></div>
</div>
<p> </p>
</body>
</html>
提前致谢 :)
问候,
约瑟夫
Edw*_*ard 12
您可以ease在转换中添加.
transition: all .4s ease;
-webkit-transition: all .4s ease;
Max*_*hov 10
您可以使用css transition-delay属性,如下所示:
transition-delay: 1s; /* delays for 1 second */
-webkit-transition-delay: 1s; /* for Safari & Chrome */
在此处查找更多信息http://www.w3schools.com/cssref/css3_pr_transition-delay.asp