我正在创建一个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
原文地址:https://www.jb51.cc/html/226605.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。