html+css实现二级导航

最新推荐文章于 2023-07-17 17:50:26 发布

律己以严

最新推荐文章于 2023-07-17 17:50:26 发布

阅读量3.7k

点赞数 9

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/piaoliangj/article/details/108774069

版权

前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

只使用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>

看详细的每个步骤可以看下面这个视频：BV1gT4y137WA

律己以严

关注

9
点赞
踩
42

收藏

觉得还不错? 一键收藏
1
评论
html+css实现二级导航

只使用html和css实现二级导航二级导航几乎是每个页面必备的功能，它也有很多实现的方法，接下来介绍一种只用html+css就实现出来的方法：先放上效果图：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>简单二级导航的做法</title> <style> * {
复制链接

扫一扫

专栏目录