如何用hover实现下拉菜单
2017-07-30 15:52
225 查看
作为初学者的一点积累
本文转自前端网gousky,仅作为学习过程中的积累
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> div,ul,span,li { padding: 0; margin: 0; } .nav { width: 960px; background-color: #FF519D; height: 30px; } .nav ul li { float: left; list-style-type: none; width: 80px; } .nav ul li a { color: #FFF; text-decoration: none; display: block; } .nav ul li a:hover { color: #FFF; background-color: #FFA7CD; } .nav li { line-height: 30px; text-align: center; } .nav ul li span{ display: none; text-decoration: none; position: absolute; width: 80px; } .nav span ul li a{ background-color: #FF0000; } .nav ul li:hover span { display: block; text-decoration: none; } </style> </head> <body> <div id="sunav" class="nav"> <ul> <li class="sunav"><a href="#">首页</a> <span> <ul> <li><a href="#">首页</a></li> <li><a href="#">下拉列表1</a></li> 4000 <li><a href="#">下拉列表2</a></li> </ul> </span> </li> <li class="sunav"><a href="#">下拉列表1</a> <span> <ul> <li><a href="#">首页</a></li> <li><a href="#">下拉列表1</a></li> <li><a href="#">下拉列表2</a></li> </ul> </span> </li> <li class="sunav"><a href="#">下拉列表2</a> <span> <ul> <li><a href="#">首页</a></li> <li><a href="#">下拉列表1</a></li> <li><a href="#">下拉列表2</a></li> </ul> </span> </li> </ul> </div> <div class="nav"> <ul> <li class="sunav"><a href="#">首页</a> <span> <ul> <li><a href="#">首页</a></li> <li><a href="#">下拉列表1</a></li> <li><a href="#">下拉列表2</a></li> </ul> </span> </li> <li class="sunav"><a href="#">下拉列表1</a> <span> <ul> <li><a href="#">首页</a></li> <li><a href="#">下拉列表1</a></li> <li><a href="#">下拉列表2</a></li> </ul> </span> </li> <li class="sunav"><a href="#">下拉列表2</a> <span> <ul> <li><a href="#">首页</a></li> <li><a href="#">下拉列表1</a></li> <li><a href="#">下拉列表2</a></li> </ul> </span> </li> </ul> </div> </body> </html>
本文转自前端网gousky,仅作为学习过程中的积累
相关文章推荐
- EXCEL如何实现多级联动下拉菜单
- DeDeCMS中如何实现下拉菜单
- iphone开发私房菜_5_] iphone中如何实现下拉菜单 .
- Android 的 Spinner下拉菜单如何实现 和二级以上的三级联动 (一)
- Android 的 Spinner下拉菜单如何实现 和二级以上的三级联动 (二)
- js 跨框架下拉菜单 如何用左键实现?????
- jQuery如何实现点击下拉菜单的隐藏和显示
- 如何实现在Asp.net下XP风格的下拉菜单
- DeDeCMS中如何实现下拉菜单
- 如何实现导航菜单栏中的二级下拉菜单?
- ios学习--iphone开发私房菜_5_] iphone中如何实现下拉菜单 .
- 如何实现导航菜单栏中的二级下拉菜单?
- ios学习--iphone开发私房菜_5_] iphone中如何实现下拉菜单 .
- 基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
- 如何实现点击一个下拉菜单的选项就弹出不同的输入框或者下拉菜单
- [iphone开发私房菜_5_] iphone中如何实现下拉菜单
- WPF and Silverlight.ComboBox 如何通过 Binding IsDropDownOpen 实现下拉菜单展开
- 如何实现导航菜单栏中的二级下拉菜单?