前端小白实现html+css源代码的二级导航

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

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

先放上效果图:前端小白实现html+css源代码的二级导航_第1张图片

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


<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

你可能感兴趣的:(前端,html,css)