css二级下拉菜单代码实例
分类:实例代码
分享一段非常简单的代码实例,它使用css实现了二级下拉导航菜单效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style> body { margin: 0; } ul { margin: 0; padding: 0; list-style-type: none; overflow: hidden; background-color: #333; } ul > li { float: left; } ul a { display: block; padding: 15px; color: #fff; text-decoration: none; } .dropdown { display: inline-block; position: absolute; } .dropdown-content { display: none; position: absolute; min-width: 120px; } .dropdown-content a { background-color: #f9f9f9; color: #000; } .dropdown-content a:hover { background-color: #f1f1f1; } .dropdown:hover .dropdown-content { display: block; } ul > li > a:hover { background-color: #111; } </style> </head> <body> <ul> <li><a href="#">犀牛前端部落一</a></li> <li><a href="#">犀牛前端部落二</a></li> <li><a href="#">犀牛前端部落三</a></li> <li class="dropdown"> <a class="dropdown-btn" href="#">犀牛前端部落四</a> <div class="dropdown-content"> <a href="#">css教程</a> <a href="#">div教程</a> <a href="#">ajax教程</a> </div> </li> </ul> </body> </html>
网站出售中,有意者加微信:javadudu