网页的下拉菜单是,当鼠标移入到指定元素上时i,会出现下拉菜单。
dropdown 是 dropdown-content的父元素。
<div class="dropdown">
<span>鼠标移动到我这!</span>
<div class="dropdown-content">
<p>我会显示出来</p>
</div>
</div>
指定样式:
.dropdown {
position: relative;
display: inline-block;
}
给鼠标移入的元素开启定位(相对定位)
.dropdown-content {
display: none; //暂时隐藏下拉菜单的内容
position: absolute; //等级比相对定位高,显示时可覆盖
background-color: #f9f9f9;
min-width: 160px; //意义是最小也不能小到160px的宽度
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);//下拉菜单的阴影修饰
padding: 12px 16px;
}
.dropdown:hover .dropdown-content { / / hover时的下拉内容
display: block; //hover时显示content
}
实现下拉列表。