css基本下拉菜单实例与解析
导读：基本下拉菜单 当鼠标移动到指定元素上时，会出现下拉菜单。 实例 .dropdown { position: relative; display: inline-block; } .dropdown-conten...
基本下拉菜单
当鼠标移动到指定元素上时，会出现下拉菜单。
实例
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
}
[mycode3]
[mycode3 type="html"]
鼠标移动到我这！
实例解析
HTML部分：
我们可以使用任何的HTML元素来打开下拉菜单，如：,或a元素。
使用容器元素(如：菜鸟教程
www.runoob.com
)来创建下拉菜单的内容，并放在任何你想放的位置上。
使用
元素来包裹这些元素，并使用CSS来设置下拉内容的样式。
CSS部分：
.dropdown类使用position:relative,这将设置下拉菜单的内容放置在下拉按钮(使用position:absolute)的右下角位置。
.dropdown-content类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。注意min-width的值设置为160px。你可以随意修改它。注意:如果你想设置下拉内容与下拉按钮的宽度一致，可设置width为100%(overflow:auto设置可以在小尺寸屏幕上滚动)。
我们使用box-shadow属性让下拉菜单看起来像一个"卡片"。
:hover选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css基本下拉菜单实例与解析
本文地址： https://pptw.com/jishu/664037.html