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>
效果展示:
相关推荐
JamSlade44 分钟前
流式响应 sse 系统全流程 react + fastapi为例子
前端·react.js·fastapi
徐同保1 小时前
react useState ts定义类型
前端·react.js·前端框架
liangshanbo12151 小时前
React 19 vs React 18全面对比
前端·javascript·react.js
望获linux1 小时前
【实时Linux实战系列】Linux 内核的实时组调度(Real-Time Group Scheduling)
java·linux·服务器·前端·数据库·人工智能·深度学习
Never_Satisfied1 小时前
在 JavaScript 中,删除数组中内容为xxx的元素
java·前端·javascript
_菜鸟果果1 小时前
Vue3+echarts 3d饼图
前端·javascript·echarts
Luffe船长2 小时前
前端vue2+js+springboot实现excle导入优化
前端·javascript·spring boot
Demoncode_y3 小时前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
明天最后3 小时前
使用 Service Worker 限制请求并发数
前端·service worker
java水泥工3 小时前
基于Echarts+HTML5可视化数据大屏展示-电信厅店营业效能分析
前端·echarts·html5·大屏展示