导航栏及下拉菜单的实现

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

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

编写代码

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>
相关推荐
森之鸟14 小时前
Mac电脑上如何打印出字体图标
前端·javascript·macos
mCell14 小时前
GSAP 入门指南
前端·javascript·动效
gnip15 小时前
组件循环引用依赖问题处理
前端·javascript
Aotman_16 小时前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
Nan_Shu_61416 小时前
Web前端面试题(1)
前端·面试·职场和发展
lypzcgf16 小时前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
百思可瑞教育16 小时前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
患得患失94917 小时前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript
大前端helloworld17 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·javascript·面试
trsoliu17 小时前
前端基于 TypeScript 使用 Mastra 来开发一个 AI 应用 / AI 代理(Agent)
前端·人工智能