【html+css（大作业）】二级菜单导航栏

目录

实现效果

 代码及其解释

html部分

CSS部分

hello，hello好久不见！

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

实现效果

 代码及其解释

html部分

<!DOCTYPE html>
<html>
	<head>
		<link rel=" shortcut icon"  type="image/x-icon" href="./img/图标1.jpg">
		<link rel="stylesheet" type="text/css" href="./css/首页.css"/>
		<meta charset="utf-8" />
		<title>数博会官网</title>
	</head>
	<body>
		<div class="navbar">
			<div class="nav">
				<ul>
			<li></li>
			<li></li>
			<li></li>
					
						<li><a href="#">首页</a>
							<ol>
								<li><a href="#">数博会介绍</a></li>
								<li><a href="#">往届回顾</a></li>
								<li><a href="#">精彩瞬间</a></li>
							</ol>
						</li>
					
					
				     <li><a href="#">新闻中心</a>
					 <ol>
					 	<li><a href="#">头条新闻</a></li>
						<li><a href="#">展会新闻</a></li>
						<li><a href="#">行业新闻</a></li>
						<li><a href="#">展商新闻</a></li>
					 </ol>
					 </li>
					 
					 <li><a href="#">峰会论坛</a>
					 <ol>
					 	<li><a href="#">大会日程</a></li>
					 						<li><a href="#">高端对话</a></li>
					 						<li><a href="#">专业论坛</a></li>
					 					
					 </ol>
					 </li>
					 
					 
					 <li><a href="#">展览会</a>
					 <ol> 
					 	<li><a href="#">展会介绍</a></li>
					 						<li><a href="#">展商名录</a></li>
					 						<li><a href="#">展品列表</a></li>
					 						<li><a href="#">展区分布</a></li>
					 </ol>
					 </li>
					 
					 
					<li><a href="#">数博发布</a></li>
					<li><a href="#">大赛</a></li>
					
					<li><a href="#">观摩活动</a>
					<ol> 
						<li><a href="#">观摩活动介绍</a></li>
											
					</ol>
					</li>
					
					<li class="aaa"><a href="#">数博电讯</a>
					<ol> 
						<li><a href="#">【数博2023】第十二期</a></li>
												<li><a href="#">【数博2023】第十一期</a></li>
													<li><a href="#">【数博2023】第十期</a></li>
														<li><a href="#">【数博2023】第九期</a></li>
															<li><a href="#">【数博2023】第八期</a></li>
																<li><a href="#">【数博2023】第七期</a></li>
																	<li><a href="#">【数博2023】第六期</a></li>
																		<li><a href="#">【数博2023】第五期</a></li>
																			<li><a href="#">【数博2023】第四期</a></li>
																				<li><a href="#">【数博2023】第三期</a></li>
																					<li><a href="#">【数博2023】第二期</a></li>
																						<li><a href="#">【数博2023】第一期</a></li>
					</ol>
					</li>
					
					<li><a href="#">资料下载</a></li>
					
					
					<li><a href="#">联系我们</a>
					<ol> 
						<li><a href="#">联系方式</a></li>
											<li><a href="#">组织机构</a></li>
											<li><a href="#">隐私保护协议</a></li>
					</ol>
					</li>
					
					<li></li>
						
					
					 <li class="underline">
						 <!-- 这个元素用来定义滑动的线条 -->
						 
					 </li>
				</ul>	
			</div>
		</div>
		
		<div class="bigimg">
			<img src="img/大作业/首页大一.jpg" >
		</div>
		
		
	</body>
</html>

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%;
	}

希望能帮到您！！，

我们下次见啦~~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/658889.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

气膜建筑的运行保障：应对停电的解决方案—轻空间

气膜建筑的运行保障：应对停电的解决方案—轻空间

气膜建筑作为一种现代化的建筑形式&#xff0c;以其独特的结构和多样的应用赢得了广泛关注。这种建筑依靠风机不断往内部吹气来维持其结构形态&#xff0c;那么如果遇到停电的情况&#xff0c;该如何确保其正常运行呢&#xff1f; 气膜建筑的供风系统 气膜建筑内部的气压维持依…
阅读更多...
UI自动化测试最佳设计模式POM

UI自动化测试最佳设计模式POM

当使用Selenium进行UI自动化测试时&#xff0c;Page Object Model&#xff08;POM&#xff09;是一种最佳实践的设计模式。POM的核心思想是通过将页面封装成对象&#xff0c;使得测试代码更加清晰、可维护和可重用。 POM的主要组成部分包括页面对象类、元素定位方式和操作方法…
阅读更多...
【CCF-CSP】 202309-3 梯度求解

【CCF-CSP】 202309-3 梯度求解

思路&#xff1a; 将表达式整理成只有目标求导变量的无括号加法表达式&#xff0c;其他变量均代入其值&#xff0c;然后利用最简单的求导公式&#xff0c;求出最终值。 样例1 x1 x1 x1 * x2 *转换成 x1*x1*x1x1*x2 若求导x1&#xff0c;则只留下x1&#xff0c;变为 x1*x1*x1…
阅读更多...
6公里远距离视频传输，飞睿智能无线CV5200模组方案，设备稳定连接通信

6公里远距离视频传输，飞睿智能无线CV5200模组方案，设备稳定连接通信

随着科技的不断进步&#xff0c;物联网&#xff08;IoT&#xff09;和智能设备正逐渐渗透到我们生活的方方面面。在这一进程中&#xff0c;远距离无线通信成为推动行业发展的关键因素。 智能控制、远程无线传输是实现设备间的协作场景的关键&#xff0c;CV5200模组通过无线WiF…
阅读更多...
大白话70个你必须知道的AI重要概念

大白话70个你必须知道的AI重要概念

本文按英文起首字母顺序&#xff0c;整理了70个常用的生成式AI领域常用概念&#xff0c;试图以大白话进行诠释&#xff0c;如果你不求甚解、但也求略解的话&#xff0c;欢迎收藏。第一部分从A到I&#xff0c;第二部分从L到P&#xff0c;第三部分从Q到Z。 A 1 Agents: 代理人。…
阅读更多...
民国漫画杂志《时代漫画》第31期.PDF

民国漫画杂志《时代漫画》第31期.PDF

时代漫画31.PDF: https://url03.ctfile.com/f/1779803-1248635507-e54e55?p (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps: 资源来源网络!
阅读更多...
笔记-python-map的用法

笔记-python-map的用法

map()函数 map()是 Python 内置的高阶函数&#xff0c;它接收一个函数 f 和一个 list&#xff0c;并通过把函数 f 依次作用在 list 的每个元素上&#xff0c;得到一个新的 list 并返回。 1、当seq只有一个时&#xff0c;将函数func作用于这个seq的每个元素上&#xff0c;并得到…
阅读更多...
【御控工业物联网】 Java JSON结构转换、JSON结构重构、JSON结构互换（17）：数组To对象——键值互换属性重组

【御控工业物联网】 Java JSON结构转换、JSON结构重构、JSON结构互换（17）：数组To对象——键值互换属性重组

文章目录 一、JSON结构转换是什么&#xff1f;二、核心构件之转换映射三、案例之《JSON数组 To JSON对象》四、代码实现五、在线转换工具六、技术资料 一、JSON结构转换是什么&#xff1f; JSON结构转换指的是将一个JSON对象或JSON数组按照一定规则进行重组、筛选、映射或转换…
阅读更多...
轻兔推荐 —— plausible-analytics

轻兔推荐 —— plausible-analytics

简介 Plausible Analytics 是一个开源的、界面美观、简单易用的网站访问量统计工具。 - 易接入&#xff1a;仅需一行代码就可给网站添加统计数据。 - 数据指标统计完整&#xff1a;可直观查看外链来源、页面访问量排序、访问设备、访问地区等。 特点 无需Cookie&#xff…
阅读更多...
基于飞书机器人跨账号消息提醒

基于飞书机器人跨账号消息提醒

事情的起因是飞书中不同的账号不能同时登录&#xff0c;虽然可以在飞书的账号切换页面看到其他账号下是否有消息提醒&#xff08;小红点&#xff09;&#xff0c;但是无法实现提醒功能&#xff0c;很不优雅&#xff0c;因此本文尝试提出一种新的方式实现不同账号之间的提醒功能…
阅读更多...
JVM的垃圾回收机制--GC

JVM的垃圾回收机制--GC

垃圾回收机制&#xff0c;是java提供的对于内存自动回收的机制。java不需要像C/C那样手动free()释放内存空间&#xff0c;而是在JVM中封装好了。垃圾回收机制&#xff0c;不是java独创的&#xff0c;现在应该是主流编程语言的标配。GC需要消耗额外的系统资源&#xff0c;而且存…
阅读更多...
222.完全二叉树的节点个数

222.完全二叉树的节点个数

给出一个完全二叉树&#xff0c;求出该树的节点个数。 示例 1&#xff1a; 输入&#xff1a;root [1,2,3,4,5,6]输出&#xff1a;6 示例 2&#xff1a; 输入&#xff1a;root []输出&#xff1a;0 示例 3&#xff1a; 输入&#xff1a;root [1]输出&#xff1a;1 提示…
阅读更多...
uni-app基础框架搭建（vue3+ts+vite）

uni-app基础框架搭建（vue3+ts+vite）

1.基础准备 uni-app官网uni-app,uniCloud,serverless,环境安装,创建uni-app,自定义模板,国内特殊情况,更新依赖到指定版本,运行、发布uni-app,运行并发布快应用,运行并发布快应用(webview),运行并发布快应用(webview)-华为,cli创建项目和HBuilderX可视化界面创https://uniapp.…
阅读更多...
如何高效搜索？99%的人都不知道的搜索进阶小技巧

如何高效搜索？99%的人都不知道的搜索进阶小技巧

如何高效搜索任何你想要的信息&#xff1f; 比如怎么找第一手的行业研究报告&#xff1f; 在哪查高清无码的图片素材&#xff1f; 怎么搜最新的AI工具教程&#xff1f; 遇到以上问题你会怎么搜&#xff1f; 可能大部分人都是直接打开百度查关键词&#xff0c;虽然随便一搜…
阅读更多...
数据结构复习指导之B树和B+树

数据结构复习指导之B树和B+树

目录 B树和B树 考纲内容 1.B树及其基本操作 1.1B树的查找 1.2B树的高度&#xff08;磁盘存取次数&#xff09; 1.3B树的插入 1.4B树的删除 2.B树的基本概念 B树和B树 考纲内容 考研大纲对 B树和 B树的要求各不相同&#xff0c;重点在于考查B树&#xff0c;不仅要求理解…
阅读更多...
超声波清洗机哪家好用又实惠？四款好评如潮的超声波清洗机推荐

超声波清洗机哪家好用又实惠？四款好评如潮的超声波清洗机推荐

很多戴眼镜的朋友都在寻求一种既能保护眼镜光泽又能深层清洁的方法时&#xff0c;超声波清洗机无疑成为了许多眼镜用户的首选&#xff0c;可以更好清洗眼镜&#xff0c;从而避免眼镜的污渍而导致我们眼部出现过敏的问题。但在市场上琳琅满目的超声波清洗机中&#xff0c;哪些才…
阅读更多...
[pdf，epub]《软件方法》2024版电子书共290页（202405更新）

[pdf，epub]《软件方法》2024版电子书共290页（202405更新）

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 已上传本账号CSDN资源。 或者到以下链接下载&#xff1a; http://www.umlchina.com/url/softmeth2024.html&#xff0c;或点击“阅读原文”。 如果需要提取码&#xff1a;umlc 已排…
阅读更多...
「浏览器」跨站请求伪造CSRF攻击的原理以及防范措施

「浏览器」跨站请求伪造CSRF攻击的原理以及防范措施

前言 HTTP 是一个无状态的协议&#xff0c;比如需要账号密码登录的网站这个场景&#xff0c;为了避免每次都需要重复输入&#xff0c;有一种方案就是Cookie&#xff0c;具体使用不做赘述&#xff0c;但是这样带来了一些安全问题。跨站请求伪造&#xff08;CSRF&#xff09;攻击…
阅读更多...
IMU应用于评估脊髓损伤患者的膝关节痉挛

IMU应用于评估脊髓损伤患者的膝关节痉挛

近日&#xff0c;美国西北大学团队利用便携式IMU系统精确量化脊髓损伤&#xff08;SCI&#xff09;患者膝关节伸肌痉挛的程度&#xff0c;不仅验证了IMU系统的可靠性与准确性&#xff0c;还强调了其在动态评估痉挛变化方面的独特贡献。 研究团队创新性地将IMU技术引入到经典的…
阅读更多...
视频智能分析平台LntonAIServer视频监控管理平台裸土检测算法的重要性与应用

视频智能分析平台LntonAIServer视频监控管理平台裸土检测算法的重要性与应用

随着科技的飞速发展&#xff0c;人工智能技术在各个领域的应用越来越广泛。其中&#xff0c;LntonAIServer裸土检测算法作为一种先进的技术手段&#xff0c;已经在农业、环境保护等领域取得了显著的成果。本文将探讨LntonAIServer裸土检测算法的重要性及其在实际应用中的优势。…
阅读更多...
最新文章

Copyright @ 2022~2023