abstract:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>*{margin:0; padding:0;}div{width:1260px;height:40px;background:#1E1E1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0; padding:0;}
div{width:1260px;height:40px;background:#1E1E1E;margin:0 auto;}
a{text-decoration: none;color:#fff;display:inline-block; width:100px;height:40px;line-height: 40px;text-align: center;position: relative;}
a:hover ul{display:block;}
ul{position: absolute;width:100px;border:1px solid #ccc;top:40;left:0;display: none;}
li{list-style: none; color:#000;}
</style>
</head>
<body>
<div>
<a href="">首页</a>
<a href="">下拉菜单1
<ul>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</a>
<a href="">下拉菜单2
<ul>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</a>
<a href="">下拉菜单3
<ul>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</a>
</div>
</body>
</html>
css实现下拉菜单可以使用定位,同时利用display:none将下拉菜单隐藏。利用hover将display改为block即可以实现下拉菜单。
Correcting teacher:天蓬老师Correction time:2019-04-01 09:43:43
Teacher's summary:display属性, 是每个标签都有的原生属性, 它的功能非常强大, 决定了这个标签的出身和使用场景