纯html+css做的顶部四级菜单栏，伪类选择器和定位的高级用法

html内容

<ul class="one">
			<li><a href="#">一级菜单1</a>
				<ul class="two">
					<li><a href="#">二级菜单1</a>
						<ul class="three">
							<li><a href="#">三级菜单1</a>
								<ul class="four">
									<li><a href="#">四级菜单1</a></li>
									<li><a href="#">四级菜单2</a></li>
									<li><a href="#">四级菜单3</a></li>
								</ul>
							</li>
							<li><a href="#">三级菜单2</a></li>
							<li><a href="#">三级菜单3</a>
								<ul class="four">
									<li><a href="#">四级菜单1</a></li>
									<li><a href="#">四级菜单2</a></li>
									<li><a href="#">四级菜单3</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">二级菜单2</a>
						<ul class="three">
							<li><a href="#">三级菜单1</a></li>
							<li><a href="#">三级菜单2</a></li>
							<li><a href="#">三级菜单3</a></li>
						</ul>
					</li>
					<li><a href="#">二级菜单3</a>
						<ul class="three">
							<li><a href="#">三级菜单1</a></li>
							<li><a href="#">三级菜单2</a></li>
							<li><a href="#">三级菜单3</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="#">一级菜单2</a>
				<ul class="two">
					<li><a href="#">二级菜单1</a>
						<ul class="three">
							<li><a href="#">三级菜单1</a></li>
							<li><a href="#">三级菜单2</a></li>
							<li><a href="#">三级菜单3</a></li>
						</ul>
					</li>
					<li><a href="#">二级菜单2</a>
						<ul class="three">
							<li><a href="#">三级菜单1</a></li>
							<li><a href="#">三级菜单2</a></li>
							<li><a href="#">三级菜单3</a></li>
						</ul>
					</li>
					<li><a href="#">二级菜单3</a>
						<ul class="three">
							<li><a href="#">三级菜单1</a></li>
							<li><a href="#">三级菜单2</a></li>
							<li><a href="#">三级菜单3</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="#">一级菜单3</a>
				<ul class="two">
					<li><a href="#">二级菜单1</a>
						<ul class="three">
							<li><a href="#">三级菜单1</a></li>
							<li><a href="#">三级菜单2</a></li>
							<li><a href="#">三级菜单3</a></li>
						</ul>
					</li>
					<li><a href="#">二级菜单2</a>
						<ul class="three">
							<li><a href="#">三级菜单1</a></li>
							<li><a href="#">三级菜单2</a></li>
							<li><a href="#">三级菜单3</a></li>
						</ul>
					</li>
					<li><a href="#">二级菜单3</a>
						<ul class="three">
							<li><a href="#">三级菜单1</a></li>
							<li><a href="#">三级菜单2</a></li>
							<li><a href="#">三级菜单3</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>

css样式内容

<style>
			ul{
				list-style: none;	/*去掉列表头部样式*/
			}
			a{
				text-decoration: none;		/*去掉链接下划线*/
			}
			a:hover{
				color: red;		/*鼠标移上链接变红色*/
			}
			.one > li{
				display: inline-block;	/*一级菜单样式,设置相对定位,配合二级菜单的绝对定位*/
				background: white;
				border: 1px solid black;
				width: 120px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				position: relative;
			}
			.two{
				display: none;		/*隐藏二级菜单,和设置绝对定位位置*/
				position: absolute;
				left: -41px;
				top: 32px;
			}
			.two > li{
				background: white;		/*同一次菜单样式*/
				border: 1px solid black;
				width: 120px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				margin-top: 2px;
				position: relative;
			}
			.three{
				display: none;
				position: absolute;
				left: 85px;
				top: -3px;
			}
			.three > li{
				background: white;
				border: 1px solid black;
				width: 120px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				margin-top: 2px;
				position: relative;
			}
			.four{
				display: none;
				position: absolute;
				left: 85px;
				top: -3px;
			}
			.four > li{
				background: white;
				border: 1px solid black;
				width: 120px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				margin-top: 2px;
			}
			ul li:hover{	/*设置li的背景伪类*/
				background: wheat;
			}
			ul li:hover >ul{	/*伪类高级选择,显示li下面的ul列表*/
				display: inline-block;
			}
		</style>

运行截图


喜欢的朋友可以关注我，一起交流学习