1、今日用css实现二级导航栏，在csdn上看了各种奶妈级的代码，终于倒腾出来了 2、话不多说，上效果图： 3、html代码如下：
```<!DOCTYPE HTML> <html lang="en"> <head> <title> 我的收藏</title> <meta charset="UTF-8" content="text/html" http-equiv="content-type"> <link rel="stylesheet" href="css1.css" type="text/css"> </head> <body> <div id="changqi"> <ul> <li><a href="#">美食作家王刚</a> <ul> <li><a href="#">冷吃串串</a></li> <li><a href="#">麻辣小龙虾</a></li> <li><a href="#">可乐鸡翅</a></li> <li><a href="#">炸肉丸</a></li> <li><a href="#">麻辣香锅</a></li> </ul> </li> <li><a href="#">鬼畜</a> <ul> <li><a href="#">散装英语</a></li> <li><a href="#">海绵宝宝</a></li> <li><a href="#">【一人之下】</a></li> <li><a href="#">冯宝宝埋王也</a></li> <li><a href="#">长沙话齐神</a></li> </ul> </li> <li><a href="#">文豪</a> <ul> <li><a href="#">【双黑】lemon</a></li> <li><a href="#">太宰：卖贴膜</a></li> <li><a href="#">【文豪野犬】</a></li> <li><a href="#">【暗猫】</a></li> </ul> </li> <li><a href="#">神谷</a> <ul> <li><a href="#">官方</a></li> <li><a href="#">《西游降魔篇》</a></li> <li><a href="#">折原临也</a></li> <li><a href="#">【恋爱循环】</a></li> </ul> </li> <li><a href="#">专业</a> <ul> <li><a href="#">Web</a></li> <li><a href="#">数据库系统原理</a></li> <li><a href="#">【前端开发】</a></li> </li> </ul> </div> </body> </body>4、css代码如下：
```@charset "utf-8"; *{margin:0;padding:0;} body { background-color:#f5f2ff; } #changqi{ width: 100%; height: 50px; margin: 0px auto; background-color:#fff0f5; position:absolute; } #changqi ul{ margin: 0px; padding: 0px; list-style: none;/* 隐藏默认列表符号*/ } #changqi ul li{ height: 50px; text-align:center; position: relative; float: left; list-style: none;} a{ display: block; width:238px; height:100%; text-align:center; text-decoration:none; line-height:50px; font-weight:bold; font-size: 22px; background-color: #fff0f5; } a:hover{ background-color: #fff0f5; } #changqi ul li ul{ display: none;/*默认隐藏*/ position:absolute; } #changqi ul li:hover ul{ display: block; width:auto; } #changqi ul li:hover ul li a {display: block; background-color: #e6e6fa; width:238px; }5、end
