WEB第二次作业

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

*{

margin: 0;

padding: 0;

}

#menu{

background-color: blue;

width: 100%;

height: 40px;

}

.item{

float: left;

width: 100px;

height: 40px;

line-height: 40px;

text-align: center;

position: relative;

color: lightblue;

}

.item:hover{

background-color: red;

color: gold;

}

#container{

width: 720px;

margin: auto;

}

.down_menu>div{

background-color: blue;

color: white;

}

.down_menu{

background-color: gold;

display: none;

position: absolute;

}

.item:hover>.down_menu{

display: block;

width: 100px;

height: 40px;

left: 0px;

top: 40px;

}

</style>

</head>

<body>

<div id="menu">

<div id="container">

<div class="item">我的京东

<div class="down_menu">

<div>我的浏览</div>

<div>我的优惠价</div>

</div>

</div>

<div class="item">购物车

<div class="down_menu">

<div>选取商品结算</div>

<div>清空购物车</div>

<div>删除所选的商品</div>

</div>

</div>

<div class="item">我的收藏夹

<div class="down_menu">

<div>收藏的商品</div>

<div>收藏的店铺</div>

</div>

</div>

</div>

</div>

</body>

</html>

相关推荐
烛阴5 分钟前
非空断言完全指南:解锁TypeScript/JavaScript的安全导航黑科技
前端·javascript
鱼樱前端9 分钟前
2025前端人一文看懂 window.postMessage 通信
前端·vue.js
快乐点吧23 分钟前
【前端】异步任务风控验证与轮询机制技术方案(通用笔记版)
前端·笔记
pe7er1 小时前
nuxtjs+git submodule的微前端有没有搞头
前端·设计模式·前端框架
七月的冰红茶1 小时前
【threejs】第一人称视角之八叉树碰撞检测
前端·threejs
爱掉发的小李1 小时前
前端开发中的输出问题
开发语言·前端·javascript
祝余呀2 小时前
HTML初学者第四天
前端·html
浮桥3 小时前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
七夜zippoe3 小时前
前端开发中的难题及解决方案
前端·问题
Hockor4 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端