HTML第二次作业
题目：
制作带有下拉悬停菜单的导航栏
根据上图仿照制作一个带下拉悬停菜单的导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单元格的宽和高</title>
<style>
*{
margin: 0;
padding: 0;
}
#menu{
background-color: orange;
width: 100%;
height: 50px;
}
.item{
float: left;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
position: relative;
}
.item:hover{
background-color: orangered;
}
.container{
}
#down_menu>div{
color: black;
}
#down_menu{
background-color: whitesmoke;
display: none;
position: absolute;
}
.item:hover>#down_menu{
display: block;
width: 100px;
}
</style>
</head>
<body>
<div id="menu">
<div id="container">
<div class="item">服饰
<div id="down_menu">
<div>羽绒服</div>
<div>大衣</div>
<div>裤子</div>
<div>帽子</div>
</div>
</div>
<div class="item">美妆
<div id="down_menu">
<div>面霜</div>
<div>身体乳</div>
<div>精华乳</div>
<div>防晒</div>
</div>
</div>
<div class="item">家电
<div id="down_menu">
<div>电视</div>
<div>冰箱</div>
<div>手机</div>
<div>空调</div>
</div>
</div>
<div class="item">生鲜
<div id="down_menu">
<div>水果蔬菜</div>
<div>海鲜水产</div>
<div>精品肉类</div>
<div>冷饮冻食</div>
</div>
</div>
<div class="item">图书
<div id="down_menu">
<div>学习教辅</div>
<div>中外名著</div>
<div>言情爱情</div>
<div>散文随笔</div>
</div>
</div>
<div class="item">玩具
<div id="down_menu">
<div>儿童玩具</div>
<div>益智积木</div>
<div>高达模型</div>
<div>潮玩盲盒</div>
</div>
</div>
</div>
</div>
</body>
</html> 结果：
输入上述代码后，运行出来的结果如下图所示。
