导航栏及下拉菜单的实现

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

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

编写代码

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>
相关推荐
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水7 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐7 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121387 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css