HTML中鼠标悬浮时的下拉菜单用CSS怎么做

html-css019

HTML中鼠标悬浮时的下拉菜单用CSS怎么做,第1张

最好是用JS做，但是非要用CSS呢，也可以。如下是我以前写的一个CSS下拉，你可以参考一下：

<html> <head> <title></title> <style>*{margin:0padding:0} ul,li{ list-style-type:none padding:0 margin:0 } #nav li a{ display:block width:100px text-align:center text-decoration:none color:#ffffff background-color:#000000 } #nav li{ position:relative margin-bottom:2pxfloat:leftmargin-right:5px } #nav li ul{ position:absolute left:10px top:20px display:nonewidth:100px } #nav li:hover ul{ display:block } </style> </head> <body><ul id="nav"><li><a href="#">首页</a></li><li><a href="#">关于我们</a><ul><li>我们的故事</li><li>我们的团队</li></ul></li><li><a href="#">我们的服务</a><ul><li>网页设计</li><li>页面制作</li><li>程序开发</li></ul></li><li><a href="#">联系我们</a><ul><li>团队主力</li><li>团队成员</li></ul></li></ul> </body></html>

划水摸鱼的时候研究了下CSS实现悬浮式菜单，在此分享一下！

transition是一个复合属性，有四个属性transition: <transition-property>|| <transition-duration>|| <transition-timing-function>|| <transition-delay>

另外，transition与display的冲突此处暂不做讨论！