下拉菜单
最近几天在看慕课网上的前端视频。主要是下拉菜单的制作。先把代码贴上去，以后慢慢总结(考试周伤不起啊~~(那你还去看前端…)) 贴几个经典的吧： 1. 最普通的下拉菜单1234567891011121314151617181920212223242526272829303132333435363738394041<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>nav</title> <style> * {margin: 0; padding: 0; } div {width: 960px; height: 40px; margin: 0 auto; background-color: #eee;} ul {list-style: none; } ul li {position: relative; float: left; line-height: 40px; text-align: center; } a {display: block; text-decoration: none; color: #000; padding: 0 10px; height: 40px; } a:hover {color: #fff; background-color: #000;} ul li ul li {float: none; background-color: #eee; margin-top: 2px;} ul li ul {position: absolute; left: 0; top: 40px; display: none;} ul li ul li a{ width:80px;} ul li ul li a:hover {background-color: #06F;} ul li:hover ul{display: block;} </style></head><body> <div> <ul> <li><a href="#">首页</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> </ul> </li> <li><a href="#">课堂大厅</a> <ul> <li><a href="#">视频学习</a></li> <li><a href="#">案例学习</a></li> </ul> </li> <li><a href="#">学习中心</a></li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div></body></html>