前端第二次作业

复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#menu{
				background-color: purple;
				width: 100%;
				height: 50px;
			}
			.item{
				float: left;
				width: 100px;
				height: 50px;
				line-height: 50px;
				/* border: 1px solid red; */
				text-align: center;
				color: white;
				position: relative;
			} 
			.item:hover{
				background-color: red;
			}
			#container{
				width: 720px;
				margin: auto;
			}
			.down_menu{
				display: none;
				position: absolute;
			}
			.item:hover > .down_menu{
				background-color: #cccccc;
				display: block;
				color: black;
				left: 20px;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<div id="container">
			    <div class="item">game1
				    <div class="down_menu">
						<div>xiazai</div>
						<div>jiaoyi</div>
						<div>waigua</div>
						<div>gonglv</div>
					</div>
				</div>
			    <div class="item">game2
				    <div class="down_menu">
				    	<div>xiazai</div>
				    	<div>jiaoyi</div>
				    	<div>waigua</div>
				    	<div>gonglv</div>
				    </div>
				</div>
			    <div class="item">game3
				    <div class="down_menu">
				    	<div>xiazai</div>
				    	<div>jiaoyi</div>
				    	<div>waigua</div>
				    	<div>gonglv</div>
				    </div>
				</div>
			    <div class="item">game4
				    <div class="down_menu">
				    	<div>xiazai</div>
				    	<div>jiaoyi</div>
				    	<div>waigua</div>
				    	<div>gonglv</div>
				    </div>
				</div>	
			    <div class="item">game5
				    <div class="down_menu">
				    	<div>xiazai</div>
				    	<div>jiaoyi</div>
				    	<div>waigua</div>
				    	<div>gonglv</div>
				    </div>
				</div>
			    <div class="item">game6
				    <div class="down_menu">
				    	<div>xiazai</div>
				    	<div>jiaoyi</div>
				    	<div>waigua</div>
				    	<div>gonglv</div>
				    </div>
				</div>
			</div>
		</div>
	</body>
</html>

效果图

相关推荐
光影少年10 分钟前
vue3.0性能提升主要通过那几方面体现的?
前端·vue.js
小磊哥er22 分钟前
【前端工程化】前端开发中的这些设计规范你知道吗
前端
江城开朗的豌豆23 分钟前
路由守卫:你的Vue路由‘保安’,全局把关还是局部盯梢?
前端·javascript·vue.js
Jinxiansen021130 分钟前
Vue 3 响应式核心源码详解(基于 @vue/reactivity)
前端·javascript·vue.js
OEC小胖胖5 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
vvilkim6 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
ai小鬼头8 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz8 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子8 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边8 小时前
Cursor 进阶使用教程
前端·ai编程·cursor