html三级导航栏编写 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三级导航</title>
	<style>
		* {
			margin:0;
			padding:0;
		}

		ul,ol,li {
			list-style: none;
		}

		a {
			text-decoration: none;
		}



		ul.nav {
			width: 405px;
			height: 30px;
			margin:50px 0 0 50px;
			float: left;
			/*background-color:#ccc;*/
		}
		ul li {
			float: left;
			border-right: 1px solid #222;

		}
		ul li a {
			display: block;
			width: 100px;
			height: 30px;
			background: #eee;
			line-height: 30px;
			text-align: center;
		}
		.nav li a:hover {
			background: #333;
			opacity: .8;
		}

		.nav li ul {
			position: absolute;
			display: none;
			width: 101px;

		}
		.nav li:hover .nav2 {
			display: block;
		}
		
		.nav .nav3{
			position: absolute;
			display: none;
			width: 101px;
			left: 101px;
			/* 使nav3元素上移30px */
			margin-top: -30px;
		}
		.nav2 li:hover .nav3{
			display: block;
		}
		
	</style>
</head>
<body>
	<ul class="nav">
		<li><a href="javascript:;">首页</a></li>
		<li><a href="javascript:;">产品中心</a>
			<ul class="nav2">
				<li><a href="javascript:;">产品1</a>
					<ul class="nav3">
						<li><a href="javascript:;">产品11</a></li>
						<li><a href="javascript:;">产品22</a></li>
						<li><a href="javascript:;">产品33</a></li>
					</ul>
				</li>
				<li><a href="javascript:;">产品2</a>
					<ul class="nav3">
						<li><a href="javascript:;">产品12</a></li>
						<li><a href="javascript:;">产品23</a></li>
						<li><a href="javascript:;">产品34</a></li>
					</ul>
				</li>
				<li><a href="javascript:;">产品3</a>
					<ul class="nav3">
						<li><a href="javascript:;">产品15</a></li>
						<li><a href="javascript:;">产品26</a></li>
						<li><a href="javascript:;">产品37</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="javascript:;">个人中心</a>
			<ul class="nav2">
				<li><a href="javascript:;">产品1</a></li>
				<li><a href="javascript:;">产品2</a></li>
				<li><a href="javascript:;">产品3</a></li>
			</ul>
		</li>
		<li><a href="javascript:;">服务中心</a>
			<ul class="nav2">
				<li><a href="javascript:;">产品1</a></li>
				<li><a href="javascript:;">产品2</a></li>
				<li><a href="javascript:;">产品3</a></li>
			</ul>
		</li>
	</ul>
</body>
</html>

 

posted @ 2022-10-22 20:33  JackieDYH  阅读(10)  评论(0)  编辑  收藏  举报  来源