目录

实现效果

 代码及其解释

html部分

CSS部分

---

hello，hello好久不见！

今天我们来写二级导航栏，所谓二级导航栏，简单来说就是鼠标放上去就有菜单拉出：

实现效果

 代码及其解释

html部分

	
		
		
		
		
	
	
		
			
				

			

			

			

					
						
首页
							

								
数博会介绍
								
往届回顾
								
精彩瞬间
							
						
					
					
				     
新闻中心
					 

					 	
头条新闻
						
展会新闻
						
行业新闻
						
展商新闻
					 
					 
					 
					 
峰会论坛
					 

					 	
大会日程
					 						
高端对话
					 						
专业论坛
					 					
					 
					 
					 
					 
					 
展览会
					 
 
					 	
展会介绍
					 						
展商名录
					 						
展品列表
					 						
展区分布
					 
					 
					 
					 
					
数博发布
					
大赛
					
					
观摩活动
					
 
						
观摩活动介绍
											
					
					
					
					
数博电讯
					
 
						
【数博2023】第十二期
												
【数博2023】第十一期
													
【数博2023】第十期
														
【数博2023】第九期
															
【数博2023】第八期
																
【数博2023】第七期
																	
【数博2023】第六期
																		
【数博2023】第五期
																			
【数博2023】第四期
																				
【数博2023】第三期
																					
【数博2023】第二期
																						
【数博2023】第一期
					
					
					
					
资料下载
					
					
					
联系我们
					
 
						
联系方式
											
组织机构
											
隐私保护协议
					
					
					
					

						
					
					 

						 
						 
					 
				
	
			
		
		
		
			
		
		
		
	

CSS部分

*{
	padding: 0;
	margin: 0;
}
body{
	width: 100%;
	
}
li{
	list-style: none;
}	
a{
text-decoration: none;
	color:#FFFFFF;
}
li ol a{
	color: darkblue;
	font-size: 12.5px;
	line-height: 70px;
}
li ol{
	text-align: center;
}
.aaa ol li a{
	font-size: 10px;
}
.navbar{
	float: left;
	width: 100%;
	height: 70px;
	background-color: #0D2654;
	background-color: rgba(0,0,0,0.3);
	/* 怎么感觉没用啊？ */
	box-shadow: 0px 0px 5px ;
}
/* 后代选择器 */
.navbar .nav{
	width: 100%;
	height: 100%;
	/* 让元素水平居中 */
	margin: 0 auto;
}
.navbar .nav ul{
	/* 相对定位 */
	position: relative;
	/* 弹性布局 */
	display: flex;
	/* 让子元素平均分配宽度 */
	justify-content: space-around;
	width: 100%;
	height: 100%;
}
/* 只对ul里的li起作用？ */
.navbar .nav ul>li{
	background-color: #0D2654;
	background: rgba(0,0,0,0.3);
	width: 100%;
	height: 100%;
}
/* 只对ul里的li里的a起作用 */
.navbar .nav ul>li>a{
	/* ? */
	display: block;
	width: 100%;
	height: 100%;
	line-height: 70px;
	text-align: center;
}
.navbar .nav ul>li ol{
	width: 100%;
	background-color: #FFFFFF;
	/* box-shadow: 1px 1px 3px; */
	/* 让盒子先沿着y轴缩放到0，也就是隐藏了 */
	transform: scaleY(0);
	/* 我们需要将盒子从上面滑动下来 设置一下缩放中心点即可 */
	transform-origin: 50% 0;
	/* 设置过渡 */
	/* transition: all 0.6s; */
}
.navbar .nav ul >li ol li{
	height: 70px;
	border-bottom: 1px solid rgb(245,245,245);
}
.navbar .nav ul>li ol li:hover{
	background-color: rgba(0,180,245,0.3);
}
.navbar .nav ul>li:hover ol{
	transform: scaleY(1);
}
.navbar .nav ul .underline{
	top: 50px;
	/* 绝对定位 */
	position: absolute;
	bottom: 0;
	/* 第一个条条距离最左边的距离 */
	left: 315px;
	width: 100px;
	/* 条高 */
	height: 2px;
	/* 设置圆角 */
	border-radius: 2px;
	background-color: white;
	/* 加上过渡 */
	/* transition: all 0.5s; */
	/* 不加了 */
	pointer-events: none;
	}
	.navbar .nav ul>li:nth-child(2):hover~ .underline{
		left: 315px;
		background-color:white;
	}
	.navbar .nav ul>li:nth-child(3):hover~ .underline{
		left: 315px;
		background-color: white;
	}
	.navbar .nav ul>li:nth-child(4):hover~ .underline{
		left: 315px;
		background-color: white;
	}
	
	.navbar .nav ul>li:nth-child(5):hover~ .underline{
		left: 425px;
		background-color:white;
	}
	.navbar .nav ul>li:nth-child(6):hover~ .underline{
		left: 525px;
		background-color: white;
	}
	.navbar .nav ul>li:nth-child(7):hover~ .underline{
		left: 635px;
		background-color:white;
	}
	.navbar .nav ul>li:nth-child(8):hover~ .underline{
		left: 735px;
		background-color: white;
	}
	.navbar .nav ul>li:nth-child(9):hover~ .underline{
		left: 840px;
		background-color:white;
	}
	.navbar .nav ul>li:nth-child(10):hover~ .underline{
		left: 945px;
		background-color: white;
	}
	
	.navbar .nav ul>li:nth-child(11):hover~ .underline{
		left: 1045px;
		background-color: white;
	}
	.navbar .nav ul>li:nth-child(12):hover~ .underline{
		left: 1150px;
		background-color:white;
	}
	.navbar .nav ul>li:nth-child(13):hover~ .underline{
		left: 1260px;
		background-color:white;
	}
	.navbar .nav ul>li:nth-child(14):hover~ .underline{
		left: 1260px;
		background-color:white;
	}
	.bigimg{
		float: left;
		margin-top: -70px;
	}
	img{
		width: 100%;
	}
		
	

希望能帮到您！！，

我们下次见啦~~