构建一个导航栏web

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#menu{
				background-color:purple;
				width: 100px;
				height: 50px;
			}
			.item{
				float: left;
				/* 浮动标签可以让块标签,处于同一行 */
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				color: white;
				position: relative;
			}
			.item:hover{
				background-color: red;
			}
			#container{
				width: 720px;
				margin: auto;
			}
			.down>div{
				color:black;
			}
			.down{
				background-color:#ccc;
				display: none;
				position: absolute;
			}
			.item:hover>.down{
				display: block;
				width:100px;
				top: 50px;
				left: 0px;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<div id="container">
				<div class="item">游戏1
				<div class="down">
					<!-- 要是需要多个就不能用id,id只能用一次,复制多个得用class -->
					<div>下载</div>
					<div>交易</div>
					<div>外挂</div>
					<div>攻略</div>
				</div>
				</div>
				<div class="item">游戏2
				 <div class="down">
					<!-- 要是需要多个就不能用id,id只能用一次,复制多个得用class -->
					<div>下载</div>
					<div>交易</div>
					<div>外挂</div>
					<div>攻略</div>
				 </div>
				</div>
				<div class="item">游戏3
				<div class="down">
					<!-- 要是需要多个就不能用id,id只能用一次,复制多个得用class -->
					<div>下载</div>
					<div>交易</div>
					<div>外挂</div>
					<div>攻略</div>
				</div>
				</div>
				<div class="item">游戏4
				<div class="down">
					<!-- 要是需要多个就不能用id,id只能用一次,复制多个得用class -->
					<div>下载</div>
					<div>交易</div>
					<div>外挂</div>
					<div>攻略</div>
				</div>
				</div>
				<div class="item">游戏5
				<div class="down">
					<!-- 要是需要多个就不能用id,id只能用一次,复制多个得用class -->
					<div>下载</div>
					<div>交易</div>
					<div>外挂</div>
					<div>攻略</div>
				</div>
				</div>
				<div class="item">游戏6
				<div class="down">
					<!-- 要是需要多个就不能用id,id只能用一次,复制多个得用class -->
					<div>下载</div>
					<div>交易</div>
					<div>外挂</div>
					<div>攻略</div>
				</div>
				</div>
				<div class="item">游戏7
				<div class="down">
					<!-- 要是需要多个就不能用id,id只能用一次,复制多个得用class -->
					<div>下载</div>
					<div>交易</div>
					<div>外挂</div>
					<div>攻略</div>
				 </div>
				</div>
			<div class="item">游戏2</div>
			<div class="item">游戏3</div>
			<div class="item">游戏4</div>
			<div class="item">游戏5</div>
			<div class="item">游戏6</div>
			<div class="item">游戏7</div>
		</div>
		</div>
	</body>
</html>

代码如上;

代码实现效果如下所示:

相关推荐
小钱c72 分钟前
Python使用 pandas操作Excel文件并新增列数据
python·excel·pandas
AI数据皮皮侠19 分钟前
中国博物馆数据
大数据·人工智能·python·深度学习·机器学习
Southern Wind22 分钟前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
HuangYongbiao43 分钟前
Rspack 原理:webpack,我为什么不要你
前端
yinuo1 小时前
前端项目开发阶段崩溃?试试这招“Node 内存扩容术”,立马复活!
前端
前端鳄鱼崽1 小时前
【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器
前端·react native·react.js
用户98402276679181 小时前
【React.js】渐变环形进度条
前端·react.js·svg
90后的晨仔1 小时前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js
Holin_浩霖1 小时前
JavaScript 语言革命:ES6+ 现代编程范式深度解析与工程实践
前端
前端拿破轮1 小时前
从0到1搭一个monorepo项目(一)
前端·javascript·git