我正在创建一个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>
提前致谢 ：)
问候,
约瑟夫
解决方法
您可以使用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
