导航栏

_1314DRX 2019-03-30 07:57:47

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin: 0;padding: 0} #nav{background-color: #ff5e48;width: 600px;height: 20px;margin: 0 auto;} ul li{list-style: none;float: left;line-height: 20px;text-align: center;position: relative} a {text-decoration: none;color: #c8e1de;padding: 0 20px;width: 100px} a:hover{background-color: #669900;color: #eee4cc} ul li ul{position: absolute;top: 20px;left: 0px} ul li ul li{float: none;background-color: #f2b179;margin: 1px 0;display: none} ul li ul li a{padding: 0;} ul li:hover ul li{display: block} </style>. </head> <body> <div id="nav"> <ul> <li><a href="#">首页</a> <ul> <li><a href="#">web网页战术</a></li> <li><a href="#">web网页战术</a></li> <li><a href="#">web网页战术</a></li> </ul> </li> <li><a href="#">课程大厅</a> <ul> <li><a href="#">web网页战术</a></li> <li><a href="#">服务端技术</a></li> <li><a href="#">python开发</a></li> </ul> </li> <li><a href="#">学习中心</a> <ul> <li><a href="#">web网页战术</a></li> <li><a href="#">web网页战术</a></li> <li><a href="#">web网页战术</a></li> </ul> </li> <li><a href="#">经典案例</a> <ul> <li><a href="#">web网页战术</a></li> <li><a href="#">web网页战术</a></li> <li><a href="#">web网页战术</a></li> </ul> </li> <li><a href="#">关于我们</a> <ul> <li><a href="#">web网页战术</a></li> <li><a href="#">web网页战术</a></li> <li><a href="#">web网页战术</a></li> </ul> </li> </ul> </div> </body> </html>

...全文