HTML二级菜单

HTML+CSS部分：

    <div class="box_max">
        <div class="flex">
            <li class="nav">
                <a href="">首页</a>
                <ul class="anav">
                    <div class="anav_max">

                    <div class="anav_one">
                        <li class="move">菜单</li>
                        <li class="move">菜单1</li>
                        <li class="move">菜单2</li>
                    </div>
                    <div class="anav_two">
                        <li class="move">菜单</li>
                        <li class="move">菜单1</li>
                        <li class="move">菜单2</li>
                    </div>
                    <div class="anav_three">
                        <li class="move">菜单</li>
                        <li class="move">菜单1</li>
                        <li class="move_nav">菜单2
                            <dd class="nav_three">三级菜单</dd>
                        </li>
                       
                    </div>
                </div>
                </ul>
            </li>
            <li class="nav">
                <a href="">首页</a>
                <ul class="anav">
                    <li class="move">菜单</li>
                    <li class="move">菜单1</li>
                    <li class="move">菜单2</li>
                </ul>
            </li>
            <li class="nav">
                <a href="">首页</a>
                <ul class="anav">
                    <li class="move">菜单</li>
                    <li class="move">菜单1</li>
                    <li class="move">菜单2</li>
                </ul>
            </li>
            <li class="nav">
                <a href="">首页</a>
                <ul class="anav">
                    <li class="move">菜单</li>
                    <li class="move">菜单1</li>
                    <li class="move">菜单2</li>
                </ul>
            </li>
        </div>
        
</div>



CSS部分：
*{
        margin: 0;
        padding: 0;
    }
    .nav{
        width: 100px;
        height: 50px;
        background-color: darkviolet;
        text-align: center;
        line-height: 50px;
    }
    .nav ul{
        display: none;
    }
    li{
        list-style: none;
    }
    .nav:hover .anav{
        display: block;
    }
    .anav{
        width: 500px;
        height: 300px;
        background-color: thistle;
       
    }
    .flex{
        display: flex;
        justify-content: center;
    }
    .box_max{
        width: 100%;
        height: 50px;
        background-color: thistle;
        
    }
    .anav_one{
        width: 150px;
        height: 300px;
        background-color: turquoise;
        
    }
    .anav_two{
        width: 150px;
        height: 300px;
        background-color: turquoise;
    }
    .anav_three{
        width: 150px;
        height: 300px;
        background-color: turquoise;
    }
    .anav_max{
        display: flex;
        justify-content: space-between;
    }
    .move{
        width: 150px;
        height: 50px;
        background-color: darkseagreen;
        border: 1px solid rebeccapurple;
        /* outline: 2px solid black; */
        text-align: center;
        
    }
    .move:hover{
        background-color: aquamarine;
    }
    .move_nav{
        width: 150px;
        height: 50px;
        background-color: darkseagreen;
        border: 1px solid rebeccapurple;
        /* outline: 2px solid black; */
        text-align: center;
    }
    .move_nav:hover{
        background-color: aquamarine;
    }
    .nav_three{
        display: none;
    }
    .move_nav:hover .nav_three{
        display: block;
        width: 100px;
        height: 50px;
        background-color: yellow;
        border: 1px solid rebeccapurple;
        margin-left: 150px;
        margin-top: -50px;
     
    }