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>

相关推荐
清灵xmf35 分钟前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨44 分钟前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL1 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1112 小时前
css实现div被图片撑开
前端·css
薛一半2 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾2 小时前
CSS综合练习——懒羊羊网页设计
前端·css
MarcoPage2 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
.net开发2 小时前
WPF怎么通过RestSharp向后端发请求
前端·c#·.net·wpf
**之火3 小时前
Web Components 是什么
前端·web components