- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/CSS">
- *{padding:0;margin:0;}
- .box{width:100%;height:39px;background:teal;}
- .box ul{width:980px;height:100%;margin:0 auto;list-style:none;}
- .li-nav{float:left; position:relative;}
- .li-nav a{line-height:39px;color:aqua;text-decoration: none;display:block;}/*display:block;千万不要放在这,压不住他啊*/
- .li-nav > a{padding:0 58px;}
- .box .li-nav a:hover{background:aqua;color:green;}
- .li-nav:hover a{background:green;color:aqua;display:block;}
- .li-nav ol{width:100%;list-style:none;position:absolute;top:39px;left:0;background:#000;}
- .li-nav ol li a{margin:1px;text-align:center;display:none;}
- </style>
- </head>
- <body>
- <div class="box">
- <ul>
- <li class="li-nav"><a href="">ii驱蚊器</a><ol>
- <li><a href="">十几万</a></li>
- <li><a href="">可恶</a></li>
- <li><a href="">请假啊</a></li>
- <li><a href="">咯三角</a></li>
- </ol></li>
- <li class="li-nav"><a href="">人文</a>
- <ol>
- <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>
- <li><a href="">请假啊</a></li>
- <li><a href="">请假啊</a></li>
- <li><a href="">咯三角</a></li>
- </ol>
- </li>
- <li class="li-nav"><a href="">脾气哦</a>
- <ol>
- <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>
- </ol>
- </li>
- <li class="li-nav"><a href="">历史课</a></li>
- <li class="li-nav"><a href="">力气</a></li>
- <li class="li-nav"><a href="">凯文科技</a></li>
- </ul>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/1107201614848.html
来源: http://www.codesnippet.cn/detail/1107201614848.html