导航栏及下拉菜单的实现

这次作业我们将来实现下图:

主要有导航栏及下拉菜单组成

编写代码

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				/* border: 1px solid red; */
			}

			.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_menu>div {
				color: black;
			}

			.down_menu {
				background-color: #cccccc;
				display: none;
				position: absolute;
			}

			.item:hover>.down_menu {
				display: block;
				width: 100px;
				left: 0px;
				top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="menu">
			<div class="container">
				<div class="item">游戏1
					<div class="down_menu">
						<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>
		</div>
	</body>
</html>
相关推荐
10年前端老司机20 分钟前
Promise 常见面试题(持续更新中)
前端·javascript
潘小安34 分钟前
跟着 AI 学 (一)- shell 脚本
前端·ci/cd·vibecoding
clownAdam1 小时前
Chrome性能优化秘籍
前端·chrome·性能优化
@Kerry~1 小时前
phpstudy .htaccess 文件内容
java·开发语言·前端
WebDesign_Mu3 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
@PHARAOH3 小时前
WHAT - 前端性能指标(交互和响应性能指标)
前端·交互
噢,我明白了3 小时前
前端js 常见算法面试题目详解
前端·javascript·算法
im_AMBER3 小时前
Web 开发 30
前端·笔记·后端·学习·web
Jonathan Star3 小时前
Webpack 打包优化与骨架屏结合:双管齐下提升前端性能与用户体验
前端·webpack·ux
做好一个小前端3 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html