CSS定位(position)---创建左侧菜单栏目--二级与三级

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title>position</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.page{
				width: 100%;
				height: 4043px;
				background: url("banger.jpg") center top no-repeat;
			}
			.tit{
				width: 160px;
				height: 40px;
			}
			.nav-li:hover ul{
				display: block;
			}
			.nav{
				width: 160px;
				height: 205px;
				position: fixed;
				left: 0;
				top: 50%;
				margin-top:-103px ;
				font-family: "微软雅黑";
			}
			.nav-li{
				width: 160px;
				height: auto;
				border-bottom: 1px solid #FFF;
				background: #333;
				text-align: center;
				line-height: 40px;
				color: #FFF;
				font-size: 16px;
				cursor: pointer;
			}
			.nav-li ul{
				width: 160px;
				height: auto;
				background:#FFF;
				display: none;
			}
			.nav-li ul li{
				width: 160px;
				height: 40px;
				border-bottom: 1px dashed #666;
				color: #333;
				text-align: center;
				line-height: 40px;
				position: relative;
			}
			.nav-li ul li:hover .list-3{
				display: block;
			}
			.list-3{
				width: 160px;
				height: auto;
				position: absolute;
				left: 160px;
				top: 0px;
				display: none;
			}
			.list-3Dom{
				width: 160px;
				height: 40px;
				background: #444;
				text-align: center;
				line-height: 40px;
				color: #FFF;
			}
		</style>
	</head>
	<body>
		<div class="page">
			<div class="nav">
				<div class="nav-li">
					<div class="tit">鸣人</div>
				<ul>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
				</ul>
				</div>
				<div class="nav-li">
					<div class="tit">
						佐助
					</div>
				<ul>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
						<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div></li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
				</ul>
				</div>
				<div class="nav-li">
					<div class="tit">
						大筒木辉夜
					</div>
				<ul>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
				</ul>
				</div>
				<div class="nav-li"><div class="tit">六道仙人</div>
				<ul>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
				</ul>
				</div>
				<div class="nav-li"><div class="tit"></div>
				<ul>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
						<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
				</ul>
				</div>
				<div class="nav-li"><div class="tit">宇智波带土</div>
				<ul>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
				</ul>
				</div>
				<div class="nav-li"><div class="tit">千手柱间</div>
				<ul>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
					<li>二级栏目
					<div class="list-3">
						<div class="list-3Dom">
						三级栏目
					</div>
					</div>
					</li>
				</ul>
				</div>
			</div>
		</div>
	</body>
</html>

发布了230 篇原创文章 · 获赞 1 · 访问量 4361
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览