day7 CSS实用案例2——下拉菜单

下拉菜单展示

触碰之前样式如下：

触碰之后会有一个下拉菜单，菜单里可以包含包括文字、链接、图片等，且设置了各种样式。

重要代码展示

.drop {
    /* border: 1px solid black;
    width: 200px;
    height: 200px; */
    position: relative;
    display: inline;
}

.dropbtn {
    /* 字体颜色 */
    color: white;
    background-color: blueviolet;
    font-size: 18px;
    width: 100px;
    height: 100px;
    border: none;
    cursor: pointer;
}

.drop:hover .dropbtn {
    background-color: #3e8e41;
}

.dropcontent {
    display: none;
    position: absolute;
    font-size: 20px;
    /* 按照按钮长度设置的，也可以大一点 */
    min-width: 100px;
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.2);
}

.drop:hover .dropcontent {
    display: block;
}


.dropbtn:hover .dropcontent {
    background-color: aquamarine;

}

/* .dropcontent:hover {
    background-color: gray;
} */

.dropcontent a {
    text-decoration: none;
    display: block;
    min-height: 30px;
}

.dropcontent a:hover {
    color: #3e8e41;
    background-color: gainsboro;
}

.dropcontent img {
    object-fit: cover;
    width: 100px;
}

<div class="drop">
        <button class="dropbtn">下拉菜单button>
        <div class="dropcontent">
            <span>内容1span>
            <a href="drop.html">链接1a>
            <a href="drop.html">链接2a>
            <a href="drop.html">链接3a>
            <img src="/images/haoyue.jpg">
        div>

以上代码有以下注意点

cursor属性

设置鼠标样式
cursor: pointer;就是设置成下面这个小手

更多具体样式可以看这个博主的：
cursor鼠标样式大全

position

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

• 默认值是static，表示没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

• absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。（元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。比如本代码中drop已经作了定位）
  元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

• relative:生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

• fixed :生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

根据以上代码，将.dropcontent的position: absolute;注释掉后，会导致下拉菜单内容不再以绝对定位的方式显示在按钮下方，而是按照普通流布局显示在按钮下面。这意味着下拉菜单内容将会占据文档流中的一定空间，可能会影响其他元素的布局。

在这段代码中，.drop的position: relative;用于创建一个相对定位的容器，而.dropcontent的position: absolute;用于创建一个绝对定位的菜单内容。当菜单内容的position属性为absolute时，它的位置相对于最近的具有定位属性（非static）的父元素进行定位，这里的父元素就是.drop。

display

很重要，在day2中介绍过一个案例。
day2 盒子模型和块内元素转换问题

box-shadow

也在以上链接。

由以上设计可以联想到将其制作成导航栏，比如实现这样的效果：

纯属记录个人学习，学艺不精，欢迎指正批评。