1.代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三级菜单</title> <style type="text/css"> .top-nav{ font-family: "Microsoft Yahei"; font-size: 12px; font-weight: bold;list-style: none; margin: 0 auto;padding: 0 auto;} .top-nav li{ float:left; margin-right: 1px; } .top-nav li a{ line-height: 20px; text-decoration: none; background-color: #eee; color: #666;display: block; width: 80px; text-align: center;} .top-nav li ul{ display: none; list-style: none; padding:0;position:relative; }/*最后一句解决了二级菜单和一级菜单没对齐的问题*/ /*鼠标移动到超链接上菜单变色*/ .top-nav li a:hover{background-color:blue; color:white; } /*鼠标移动到一级菜单的时候要显示二级菜单*/ .top-nav li:hover ul{ display: block; width: 80px; background-color: #827bdd; } /*二级菜单显示的时候需要隐藏三级菜单*/ .top-nav li:hover ul li ul{ display: none; } /*三级菜单在二级菜单范围内浮动*/ .top-nav li ul li:hover ul{ display: block; top:0; left:81px; position: absolute;} </style> </head> <body> <ul class="top-nav"> <li class="firstMenu"><a href="#">首页</a></li> <li class="firstMenu"><a href="#">课程大厅+</a> <ul> <li><a href="#">前端+</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">JQuery</a></li> <li><a href="#">CSS</a></li> </ul> </li> <li><a href="#">后台</a></li> <li><a href="#">手机</a> <ul> <li><a href="#">Android开发</a></li> <li><a href="#">IOS开发</a></li> </ul> </li> </ul> </li> <li class="firstMenu"><a href="#">学习中心+</a> <ul> <li><a href="#">视频学习</a></li> <li><a href="#">案例学习</a></li> <li><a href="#">交流平台</a></li> </ul> </li> <li class="firstMenu"><a href="#">经典案例</a></li> <li class="firstMenu"><a href="#">关于我们</a></li> </ul> </body> </html>
2.总结
1).去列表前面的圆点:list-style:none.
2).怎么让二级菜单竖着排列?加width。