垂直三级菜单的实现
玄夜、2019-02-28 17:28:30261<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css" />
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
ul{list-style: none;}
.nav{height: 700px;width: 150px;background: #323232;margin: 30px;color: #FFFFFF;font-size:17px;}
.nav li{text-align: center;line-height: 50px;border-bottom: 1px solid #999999;}
.nav li:hover{background: #BE1616;}
.nav span{float: right;line-height: 50px;margin-right: 10px;}
.one li{position: relative;}
.two{position: absolute;left: 150px;top: -1px;border: 1px solid #999999;}
.two li{text-align: center;line-height: 50px;border-bottom: 1px solid #999999;width: 150px;background: #323232;position: relative;}
.two p{position: absolute;left:150px;top: -1px;background: #323232;width: 350px;line-height: 25px;padding: 15px;text-indent: 2em;border: 1px solid #999999;text-align: left;}
</style>
<body>
<div class="nav">
<ul class="one">
<li style="background: #BE1616;">图书<span class="fa fa-angle-right"></span></li>
<li>文学<span class="fa fa-angle-right"></span>
<ul class="two">
<li>穆斯林的葬礼
<p>
《穆斯林的葬礼》是以回族手工匠人梁亦清的玉器作坊奇珍斋升沉起伏为主线，在历史的背景下描写梁家三代人不同的命运变迁，表现了主人公为追求理想和事业，为完善自身素质所发出的蓬勃不息的命运意识。
</p>
</li>
<li>穆斯林的葬礼</li>
<li>穆斯林的葬礼</li>
<li>穆斯林的葬礼</li>
</ul>
</li>
<li>漫画<span class="fa fa-angle-right"></span></li>
<li>小说<span class="fa fa-angle-right"></span></li>
<li>杂志<span class="fa fa-angle-right"></span></li>
</ul>
</div>
</body>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('.two').hide();
$('p').hide();
$('.one>li:eq(1)').mouseover(function(){
$(this).find('.two').slideDown(300)
})
$('.one>li:eq(1)').mouseleave(function(){
$(this).find('.two').hide(300)
})
$('.two li').mouseover(function(){
$(this).find('p').slideDown(300)
})
$('.two li').mouseleave(function(){
$(this).find('p').hide()
})
})
</script>
</html>