垂直三级菜单的实现

Original 2019-02-28 17:28:30 261
abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="font-awesom
<!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>


Correcting teacher:韦小宝Correction time:2019-02-28 18:03:57
Teacher's summary:写的很不错 这些在以后的项目中基本上都会使用到的 课后没事要记得多去练习哦

Release Notes

Popular Entries