二级菜单

二级菜单
原理：
      其核心就是两层ul进行嵌套，二级菜单先设置隐藏，当鼠标移动到一级菜单时，其对应的二级菜单自动展开


THML代码：

<nav>
            <ul>
                <h1>
                    <a href="#javascript">
                        YIYI
                    </a>
                </h1>
            </ul>
            <ul class="fl-spaceA">
                <li>
                    <a href="#javascript">首页</a>
                    <!-- syejcd首页二级菜单 -->
                    <ul class="syejcd">
                        <li><a href="#javascript">首页1</a></li>
                        <li><a href="#javascript">首页2</a></li>
                        <li><a href="#javascript">首页3</a></li>
                        <li><a href="#javascript">首页4</a></li>
                    </ul>
                </li>
                <li><a href="#javascript">商品种类</a>
                    <ul class="zhonglei">
                        <li><a href="#javascript">口红</a></li>
                        <li><a href="#javascript">眼影</a></li>
                        <li><a href="#javascript">腮红</a></li>
                        <li><a href="#javascript">眉笔</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#javascript">购物车</a>
                    <ul class="shoppingCar">
                        <li><a href="#javascript">衣服</a></li>
                        <li><a href="#javascript">裤子</a></li>
                        <li><a href="#javascript">裙子</a></li>
                        <li><a href="#javascript">鞋子</a></li>
                    </ul>
                </li>
                <li><a href="#javascript">个人中心</a></li>
            </ul>
        </nav>

CSS代码：




*{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    nav{
        width: 1000px;
        margin: auto;
        /* border: 1px solid red; */

        /* 前提条件都是先设置了flex */
        /* 优先分配给两边然后均匀分布其他空间 */
        justify-content: space-between;
        /* 垂直居中 */
        /* align-items: center; */
    }
    nav,nav>ul{
        display: flex;
    }
    nav>ul li{
        height: 30px;
        line-height: 30px;
    }
    .fl-spaceA{
        /* 平均分配所有剩余空间 */
        justify-content: space-around;
        width: 500px;
    }
    .syejcd{
        display: none;
        position: absolute;
        /* text-align: center; */
    }
    .syejcd li{
        height: 50px;
        background-color: orange;
    }
    /* nav>ul:last-child>li:nth-child(1):hover{
        background-color: red;
    } */
    nav>ul:nth-child(2)>li:nth-child(1):hover .syejcd{
        display: block;
        background-color: red;
    }
    .zhonglei{
        display: none;
        position: absolute;
    }
    .zhonglei li{
        height: 30px;
        background-color: plum;
    }
    nav>ul:nth-child(2)>li:nth-child(2):hover .zhonglei{
        display: block;
    }
    .shoppingCar{
        display: none;
        position: absolute;
    }
    .shoppingCar>li{
        height: 30px;
        /* border: 1px solid red; */
        /* 行高等于高就能实现文字垂直居中的效果 */
        line-height: 30px;
        background-color: rgb(52, 237, 52);
    }
    nav>ul:nth-child(2)>li:nth-child(3):hover .shoppingCar{
        display: block;
    }