摘要：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.css&
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.css">
<title>三级导航栏</title>
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<style>
body , ul , li {margin:0;padding:0;}
li {list-style: none;}
/* 导航 */
.nav {margin-top:50px;margin-left:60px;background:#999;width:150px;font-family: "楷体";text-align: center;height:600px;border-radius:5px 5px 5px 5px;}
.nav a {color:#fff;text-decoration: none;font-size:20px;display: block;}
.nav > li:first-child{border-radius:5px 5px 0 0;font-weight:600;}
.nav > li:first-child a {color:fff;}
.nav > li:last-child{border:none;}
.one{height:36px;line-height:36px;border-bottom:1px solid #f1f1f1;cursor: pointer;position: relative;}
.one:hover{background:#00CCFF;}
.one > a > i {float:right;margin-right:10px;margin-top:8px;}
.one > a{padding-left:10px;}
/* 二级导航 */
.one > ul{position: absolute;top:0;left:150px;width:150px;background-color:#efefef;}
.one > ul > li{position: relative;}
.one > ul > li:hover{background-color:#009999;}
/* 三级导航 */
.two p {position: absolute;top:0;left:150px;width:150px;background:#f1f1f9;line-height:24px;padding:10px;text-align: left;margin:0;border-radius:0 5px 5px 0;}
</style>
</head>
<body>
<ul class="nav">
<li class="one" style="background:#31708F;border:none;"><a href="#" style="padding-left:35px;" >图书<i class="fa fa-address-book" style="margin-right:35px;"></i></a></li>
<li class="one"><a href="#">文学<i class="fa fa-arrow-right"></i></a>
<!-- 二级 -->
<ul>
<li class="two">西游记
<p>经典的四大名著，一路降妖除魔。万路艰辛终于到达</p>
</li>
<li class="two">水浒传
<p>路见不平一声吼，鲁智深的胖和尚养成之计</p>
</li>
<li class="two">红楼梦
<p>讲述封建社会的爱恨情愁，一桨洒热血</p>
</li>
<li class="two">三国演义
<p>滚滚长江东逝水，浪花淘金英雄。古今多少事，都在付谈中。</p>
</li>
</ul>
</li>
<li class="one"><a href="#">漫画<i class="fa fa-arrow-right"></i></a>
<!-- 二级 -->
<ul>
<li class="two">阿Q正传
<p>典型的逗比搞笑，校园骚气十足</p>
</li>
<li class="two">七龙珠
<p>经典的热血打斗，战斗输出全靠悾，日本漫画大师，鸟山明神之作</p>
</li>
</ul>
</li>
<li class="one"><a href="#">杂志<i class="fa fa-arrow-right"></i></a></li>
<li class="one"><a href="#">历史<i class="fa fa-arrow-right"></i></a></li>
<li class="one"><a href="#">军事<i class="fa fa-arrow-right"></i></a></li>
<li class="one"><a href="#">玄幻<i class="fa fa-arrow-right"></i></a></li>
<li class="one"><a href="#">恐怖<i class="fa fa-arrow-right"></i></a></li>
</ul>
<script type="text/javascript">
$(function(){
//隐藏二级,三级
$('.one > ul , p').hide();
//鼠标切换效果
$('.one').hover(
function(){
//console.log();
$(this).find('> ul').stop(true).show(300);
},function(){
$(this).find('> ul').stop(true).hide(300);
});
//鼠标切换效果
$('.two').hover(
function(){
//console.log();
$(this).find('> p').stop(true).show(100);
},function(){
$(this).find('> p').stop(true).hide(100);
});
})
</script>
</body>
</html>
