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>
效果展示:
相关推荐
轻口味1 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王2 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发2 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀2 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪3 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef4 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6415 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻5 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云5 小时前
npm淘宝镜像
前端·npm·node.js