运用html+css制作二级导航栏(竖版)

最新推荐文章于 2024-08-06 13:43:08 发布

希区柯克294

最新推荐文章于 2024-08-06 13:43:08 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/weixin_65789931/article/details/131793204

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: rgb(239, 239, 235);
			}

			.li1 {
				width: 200px;
				height: 50px;
				line-height: 50px;
				list-style: none;
				text-align: left;
				color: white;
				background-color: #559b0d;
				padding-left: 20px;
				box-sizing: border-box;
			}

			.li2 {
				padding-top: 5px;
				width: 200px;
				height: 100px;
				line-height: 30px;
				list-style: none;
				text-align: left;
				color: #d9e7ce;
				background-color: #60a411;
				padding-left: 20px;
				box-sizing: border-box;
				font-size: 1px;
				font-weight: normal
			}
			
			.li25 {
				padding-top: 5px;
				width: 200px;
				height: 70px;
				line-height: 30px;
				list-style: none;
				text-align: left;
				color: #d9e7ce;
				font-weight: bold;
				background-color: #60a411;
				padding-left: 20px;
				box-sizing: border-box;
				font-size: 1px;
				font-weight: normal
			}
			.li3 {
				width: 200px;
				height: 50px;
				line-height: 50px;
				list-style: none;
				text-align: left;
				color: black;
				background-color: #f5f5f5;
				padding-left: 20px;
				box-sizing: border-box;
				/* display: none; */
			}
			
			.li3>a{
				color: #d74141;
			}
			
			.li4 {
				width: 200px;
				height: 50px;
				line-height: 25px;
				list-style: none;
				text-align: left;
				color: #6f6f79;
				background-color: #ffffff;
				font-size: 1px;
				padding-left: 20px;
				box-sizing: border-box;
				/* display: none; */
			}

			#menu {
				width: 700px;
				position: relative;
			}

			#erji2 {
				width: 500px;
				height: 570px;
				margin-top: -50px;
				position: absolute;
				background-color: white;
				margin-left: 180px;
				display: none;
				box-shadow: 5px 5px 10px grey;
			}
			#menu>#erji1:hover>#erji2 {
				display: block;
			}
			
			#menu>#yiji:hover~#erji1 {
				display: block;
			}
			
			#menu>#yiji:hover~.li4 {
				display: block;
			}
			
			p {
				margin-top: 5px;
				margin-left: 30px;
				color: #6f6f79;
				line-height: 100px;
				text-align: left;
				font-size: 1px;
				font-weight: normal;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<li class="li1" id="yiji">全部商品分类</li>
			<li class="li3" id="erji1"><a href="">各地名优茶</a>
			<div id="erji2">
				<p>绿茶&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;西湖龙井 龙井 黄山毛峰 安吉白茶 其他绿茶</p>
				<p>品牌&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;顶峰 公泰 一品堂 好吉 绿雪芽 台湾梅山制茶 白沙溪</p>
				<p>价格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100元及以下 100-300元 300元及以上</p>
				<p>净含量&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50g及以下 51-100g 101-250g 250g以上</p>
				<p>包装&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;经济自饮装 精美礼品装</p>
			</div></li>
			<li class="li4">热门&nbsp;&nbsp;&nbsp;西湖&nbsp;&nbsp;龙井&nbsp;&nbsp;金骏眉<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大红袍 铁观音</li>
			<li class="li4">名茶&nbsp;&nbsp;&nbsp;红茶&nbsp;&nbsp;绿茶&nbsp;&nbsp;乌龙茶<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;黑茶&nbsp;&nbsp;白茶</li>
			<li class="li1">花草保健茶</li>
			<li class="li2">推荐&nbsp;&nbsp;&nbsp;大麦茶&nbsp;&nbsp;苦养茶<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;玫瑰花茶&nbsp;&nbsp;雪菊<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;蜂蜜木瓜粉</li>
			<li class="li1">精选茶具</li>
			<li class="li25">推荐&nbsp;&nbsp;&nbsp;功夫茶具&nbsp;&nbsp;个人杯&nbsp;&nbsp;茶宠<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;茶叶罐</li>
			<li class="li1">可口茶食</li>
			<li class="li2">推荐&nbsp;&nbsp;&nbsp;橄榄&nbsp;&nbsp;冰糖杨梅&nbsp;&nbsp;酸甜梅</li>
		</div>
	</body>
</html>