css鼠标悬浮二级下拉导航菜单
分类:实例代码
本章节分享一段代码实例,它实现了鼠标悬浮出现二级下拉导航菜单的功能。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { margin: 0; padding: 0; } body { background-color: #ccc; } #nav { background-color: #0593d3; width: 698px; height: 40px; margin: 100px auto; border: 1px solid #fff; } ul { list-style: none; } ul li { position: relative; float: left; line-height: 40px; text-align: center; border-left: 1px solid #fff; } a { text-decoration: none; display: block; color: #fff; padding: 0 15px; height: 40px; } a:hover { color: #000; background-color: #77b6f9; } ul li ul { position: absolute; left: 0; top: 40px; display: none; } ul li ul li { float: none; background-color: #0593d3; margin-top: 2px; } ul li ul li a { width: 120px; } ul li:hover ul { display: block; } </style> </head> <body> <div id="nav"> <ul> <li><a href="#">前端教程网</a></li> <li> <a href="#">前端专区</a> <ul> <li><a href="#">css教程</a></li> <li><a href="#">div教程</a></li> </ul> </li> <li> <a href="#">资源下载</a> <ul> <li><a href="#">特效下载</a></li> <li><a href="#">图片下载</a></li> </ul> </li> <li><a href="#">js教程</a></li> <li><a href="#">json教程</a></li> <li><a href="#">正则表达式教程</a></li> </ul> </div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
* { margin: 0; padding: 0; }
上面的代码实现了简单的css重置功能,将外边距和内边距全部设置为0。
更全面的可以参阅css预重置样式代码一章节。
body { background-color: #ccc; }
设置页面背景颜色。
#nav { background-color: #0593d3; width: 698px; height: 40px; margin: 100px auto; border: 1px solid #fff; }
上面的代码是设置导航栏容器的样式。
比如背景颜色,宽度高度,还有水平居中等。
border: 1px solid #fff这个实现白色边框效果。
ul { list-style: none; }
去掉列表自带的样式。
ul li { position: relative; float: left; line-height: 40px; text-align: center; border-left: 1px solid #fff; }
上面的代码设置li为相对定位
并且左浮动,这就实现了主导航的水平排列。
line-height: 40px能够设置文本垂直居中,这个和#nav的height属性是对应的。
a { text-decoration: none; display: block; color: #fff; padding: 0 15px; height: 40px; }
上面的代码可以将链接a底部的瞎话先去掉。
并且设置其为块级元素,这样就可以设置它的尺寸。
a:hover { color: #000; background-color: #77b6f9; }
上面的代码设置鼠标悬浮于链接上的样式。
ul li ul { position: absolute; left: 0; top: 40px; display: none; }
设置li元素的ul元素的样式,也就是二级导航菜单的样式。
ul li ul li { float: none; background-color: #0593d3; margin-top: 2px; }
float: none方式继承之前的float:left的设置。
网站出售中,有意者加微信:javadudu