純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>

運行截圖


喜歡的朋友可以關注我，一起交流學習