2021-09-11 下拉菜单

css 代码

.dropdown {
/*
   position  属性规定元素的定位类型
       参数   relative    生成相对定位的元素，相对于其正常位置进行定位。
*/
  position: relative;

/*
      display 属性规定元素的类型
        参数   block         块级元素, 后边会跟着一个换行符
              inline-block   行内块元素
*/
  display: inline-block;
}
.dropdown-content {
/*
      display 属性规定元素的类型
        参数   none      此元素不会被显示
*/
  display: none;
/*
   position  属性规定元素的定位类型
       参数   absolute  生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
              static    表示块保留在原本应该在的位置，不会重新定位(默认)
*/
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
/*
box-shadow     属性把一个或多个下拉阴影添加到框上
      参数   水平阴影  垂直阴影  [模糊距离] [阴影的大小] [阴影的颜色] [从外层的阴影（开始时）改变阴影内侧阴影(inset)]
*/
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
  display: block;
}

html

<div class="dropdown">
  <span>鼠标移动到我这！</span>
  <div class="dropdown-content">
    <p>菜鸟教程</p>
    <p>www.runoob.com</p>
  </div>
</div>