CSS二级下拉菜单
分类:实例代码
CSS二级下拉菜单属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,它实现了二级下拉菜单效果。
当鼠标悬浮可以出现二级菜单。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> .menu { font-family: arial, sans-serif; width: 750px; position: relative; margin: 0; font-size: 11px; margin: 50px 0; } menu ul li a,.menu ul li a { display: block; text-decoration: none; color: #000; width: 104px; height: 20px; text-align: center; color: #fff; border: 1px solid #fff; background: #710069; line-height: 20px; font-size: 11px; overflow: hidden; } .menu ul li a:visited { display: block; text-decoration: none; color: #000; width: 104px; height: 20px; text-align: center; color: #fff; border: 1px solid #fff; background: #710069; line-height: 20px; font-size: 11px; overflow: hidden; } .menu ul { padding: 0; margin: 0; list-style-type: none; } .menu ul li { float: left; margin-right: 1px; position: relative; } /*使用display将子菜单样式隐藏*/ .menu ul li ul { display: none; } /*当鼠标移动到主菜单上上子菜单显示,使绝对定位来控制其相对父元素的位置*/ .menu ul li:hover a { color: #fff; background: #36f; } .menu ul li:hover ul { display: block; position: absolute; top: 21px; left: 0; width: 105px; } .menu ul li:hover ul li a { display: block; background: #ddd; color: #000; } .menu ul li:hover ul li a:hover { background: #6fc; color: #000; } </style> </head> <body> <div class="menu"> <ul> <li><a class="hide" href="#">首页</a></li> <li> <a class="hide" href="#">前端教程网</a> <ul> <li><a href="#">div教程</a></li> <li><a href="#">css教程</a></li> <li><a href="#">js教程</a></li> </ul> </li> <li> <a class="hide" href="#">CSS3</a> <ul> <li><a href="#">pipipi.net</a></li> <li><a href="#">css3教程</a></li> </ul> </li> <li><a class="hide" href="#">Java</a></li> <li><a class="hide" href="#">jQuery</a></li> </ul> </div> </body> </html>
上述代码实现了简单的二级下拉菜单效果,鼠标悬浮即可查看效果。
相关阅读:
(1).相对定位参阅CSS position:relative 相对定位一章节。
(2).浮动参阅CSS float浮动一章节。
(3).:hover参阅CSS E:hover伪类选择器一章节。
CSS二级下拉菜单,这样的场景在实际项目中还是用的比较多的,关于CSS二级下拉菜单就介绍到这了。