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>