新人学习笔记之（鼠标经过下拉列表）

       1.首先写好结构，常用 ul 和 li 结合

<ul class="box1">
        <a class="box2">服装</a>
        <ul class="box3">
            <li><a>外套</a></li>
            <li><a>棉袄</a></li>
            <li><a>裤子</a></li>
        </ul>
    </ul>

        2.添加css样式

ul,a{
            font-size: 20px;  /*字体大小*/
            background-color: #pink;  /*背景颜色*/
            color: #fff;  /*字体颜色*/
            width: 100px;  /*宽度*/
            text-align: center;  /*水平位置*/
        }
        a{
            display: block;
        }
        li{
            list-style-type: none;
        }

        3.box3部分隐藏

.box3{
            display: none;
        }

        4.第一个a标签用:hover选择器，实现功能:当鼠标停在上方时，显示隐藏部分。

.box1:hover .box3{
            display: block;
        }

        5.改变下拉列表框颜色。

.box1:hover li a{
            background-color: aqua;
        }

        效果：