CSS实现悬浮式菜单

html-css031

CSS实现悬浮式菜单,第1张

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

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

另外,transition与display的冲突此处暂不做讨论!

提供三种自定义导航栏悬浮的方法

在自定义组件中设定css 样式:

利用 position: fixed

利用 position: fixed

最好是用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>