侧边导航html案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜谱</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			a{
				display: block;
				text-decoration: none;
				color: #fff;
			}
			.wrap{
				width: 220px;
				height: 360px;
				margin: 20px auto;
				background-color: #a09c96;
				overflow: hidden;
			}
			.wrap .nav ul a{
				font-size: 18px;
				font-family: "微软雅黑";
				text-indent: 53px;
			}
			.wrap .nav ul{
				margin-top: 25px;
				line-height: 60px;
			}
			.wrap .nav ul li{
				width: 220px;
				text-indent: 20px;
			}
			/* .wrap .nav ul li:hover a{
				background-color: #a09c96;
				color: orange;
			} */
			.wrap .nav ul .u-li1{
				background: url(images/menu_03.jpg) no-repeat 25px 20px,url(images/menu_06.jpg) no-repeat 200px 26px;
			}
			.wrap .nav ul .u-li2{
				background: url(images/menu_11.jpg) no-repeat 25px 20px,url(images/menu_06.jpg) no-repeat 200px 26px;
			}
			.wrap .nav ul .u-li3{
				background: url(images/menu_15.jpg) no-repeat 25px 20px,url(images/menu_06.jpg) no-repeat 200px 26px;
			}
			.wrap .nav ul .u-li4{
				background: url(images/menu_18.jpg) no-repeat 25px 20px,url(images/menu_06.jpg) no-repeat 200px 26px;
			}
			.wrap .nav ul .u-li5{
				background: url(images/menu_20.jpg) no-repeat 25px 20px,url(images/menu_06.jpg) no-repeat 200px 26px;
			}
		</style>
	</head>
	
	<body>
		<div class="wrap">
			<div class="nav">
				<ul>
					<li class="u-li1">
						<a href="javascript:;">菜谱大全</a>
					</li>
					<li class="u-li2">
						<a href="javascript:;">食谱大全</a>
					</li>
					<li class="u-li3">
						<a href="javascript:;">品质珍选</a>
					</li>
					<li class="u-li4">
						<a href="javascript:;">专题专区</a>
					</li>
					<li class="u-li5">
						<a href="javascript:;">一起红</a>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>