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>

相关推荐
夕水12 分钟前
这个提升效率宝藏级工具一定要收藏使用
前端·javascript·trae
会飞的鱼先生26 分钟前
vue3 内置组件KeepAlive的使用
前端·javascript·vue.js
斯~内克40 分钟前
前端浏览器窗口交互完全指南:从基础操作到高级控制
前端
Mike_jia1 小时前
Memos:知识工作者的理想开源笔记系统
前端
前端大白话1 小时前
前端崩溃瞬间救星!10 个 JavaScript 实战技巧大揭秘
前端·javascript
loveoobaby1 小时前
Shadertoy着色器移植到Three.js经验总结
前端
蓝易云1 小时前
在Linux、CentOS7中设置shell脚本开机自启动服务
前端·后端·centos
浩龙不eMo1 小时前
前端获取环境变量方式区分(Vite)
前端·vite
土豆骑士2 小时前
monorepo 实战练习
前端
土豆骑士2 小时前
monorepo最佳实践
前端