html+css实现二级导航

最新推荐文章于 2026-05-26 16:57:54 发布

原创最新推荐文章于 2026-05-26 16:57:54 发布 · 4k 阅读

44 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

本文通过一个实例展示了如何仅使用HTML和CSS来创建二级导航菜单。当鼠标悬停在一级导航上时，二级导航会显示。通过设置display属性为none和block，实现了二级菜单的隐藏和显示效果。此外，还定义了样式使得一级和二级导航具有清晰的视觉效果，包括背景颜色、文字样式等。

只使用html和css实现二级导航

二级导航几乎是每个页面必备的功能，它也有很多实现的方法，接下来介绍一种只用html+css就实现出来的方法：

先放上效果图：

利用伪元素:hover和display属性：
二级导航：display:none;
然后在鼠标经过二级导航的父级元素时，
二级导航：display:block;

<!DOCTYPE html>
<html lang="en"> 
<head>    
	<meta charset="UTF-8">       
	<title>简单二级导航的做法</title>
	<style>        
		* {            
	      	     margin: 0;            
	             padding: 0;        
	        }
	                        
	        a {            
	             text-decoration: none;            
	             color: rgb(60, 4, 112);        
	        }
	                         
	        body {            
	             padding-top: 50px;            
	             font-size: 15px;        
	        }
	                        
	        li {            
	             list-style: none;        
	        }
	                        
	        div {            
	             text-align: center;        
	        }
	                        
	        .father {            
	             display: inline-block;            
	             position: relative;            
	             padding: 10px 20px;            
	             background-color: palevioletred;        
	        }
	                        
	        .son {            
	             display: none;            
	             position: absolute;            
	             background-color: pink;            
	             padding: 5px 5px;            
	             top: 40px;            
	             left: 10px;            
	             /* background-color: lightpink; */        
	        } 
	                       
	        .son>li {            
	             padding: 5px 5px;        
	        }
	                        
	        .father:hover .son {            
	             display: block;        
	        }
	                        
	        .son li:hover {            
	             background-color: palevioletred;        
	        }
	                        
	        .son li:hover a {            
	             color: crimson;        
	        }    
	 </style>
</head>
<body>
	<div>
		<li class="father">
			<a href="#">一级导航</a>            			
			<ul class="son">                
				<li><a href="#">二级导航</a></li>                
				<li><a href="#">二级导航</a></li>                
				<li><a href="#">二级导航</a></li>            
			</ul>        
		</li>        
		<li class="father">
			<a href="#">一级导航</a>            
			<ul class="son">                
				<li><a href="#">二级导航</a></li>                
				<li><a href="#">二级导航</a></li>                
				<li><a href="#">二级导航</a></li>            
			</ul>        
		</li>        
		<li class="father">
			<a href="#">一级导航</a>            
			<ul class="son">                
				<li><a href="#">二级导航</a></li>                
				<li><a href="#">二级导航</a></li>                
				<li><a href="#">二级导航</a></li>            
			</ul>        
		</li>
	</div>    
</body>
</html>