html练习2

实现下列图片的效果
代码:
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#menu {
				background-color: #0c0048;
				width: 100%;
				height: 50px;
				margin: auto;
			}

			.item {
				float: left;
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				color: white;
				position: relative;
			}

			.item:hover {
				background-color: red;
				color: gold;

			}

			#container {
				width: 720px;
				margin: auto;
			}

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

			.down_menu>div {
				color: black;
			}

			.item:hover>.down_menu {
				display: block;
				width: 100px;
				left: 0px;
				top: 50px;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<div id="container">
				<div class="item">游戏1
					<div class="down_menu">
						<div>游戏下载</div>
						<div>游戏交易</div>
						<div>游戏外挂</div>
						<div>游戏攻略</div>
					</div>
				</div>
				<div class="item">游戏2
					<div class="down_menu">
						<div>游戏插件</div>
						<div>游戏聊天</div>
						<div>邀请好友</div>
						<div>自定义房间</div>
					</div>
				</div>
				<div class="item">游戏3
					<div class="down_menu">
						<div>游戏下载</div>
						<div>游戏交易</div>
						<div>游戏外挂</div>
						<div>游戏攻略</div>
					</div>
				</div>
				<div class="item">游戏4
					<div class="down_menu">
						<div>游戏下载</div>
						<div>游戏交易</div>
						<div>游戏外挂</div>
						<div>游戏攻略</div>
					</div>
				</div>
				<div class="item">游戏5
					<div class="down_menu">
						<div>游戏下载</div>
						<div>游戏交易</div>
						<div>游戏外挂</div>
						<div>游戏攻略</div>
					</div>
				</div>
				<div class="item">游戏6
					<div class="down_menu">
						<div>游戏下载</div>
						<div>游戏交易</div>
						<div>游戏外挂</div>
						<div>游戏攻略</div>
					</div>
				</div>
				<div class="item">游戏7
					<div class="down_menu">
						<div>游戏下载</div>
						<div>游戏交易</div>
						<div>游戏外挂</div>
						<div>游戏攻略</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
效果展示:
相关推荐
秋田君12 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
爱隐身的官人12 分钟前
ctfshow - web - nodejs
前端·nodejs·ctf
zhong liu bin12 分钟前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
W-GEO12 分钟前
前端安全攻防:XSS, CSRF 等常见威胁的防范与检测指南
前端·安全·xss
2301_8035545215 分钟前
实习项目包装--HTTP 协议和 Web API
前端·网络协议·http
lssjzmn16 分钟前
Spring Web 异步响应实战:从 CompletableFuture 到 ResponseBodyEmitter 的全链路优化
java·前端·后端·springboot·异步·接口优化
这里有鱼汤17 分钟前
上班族没时间炒股?不妨试试这个隔夜超短战法(附:Python量化源码)
前端
n123523524 分钟前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
前端 贾公子30 分钟前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐31 分钟前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui