Navegación secundaria HTML

Cuando el mouse se mueve hacia arriba, el
código de navegación secundario se muestra de la siguiente manera:

 <div>
    <ul class="one">
        <li>A
            <ul class="two two_1">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </li>
        <li>B
            <ul class="two two_2">
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </li>
        <li>C
            <ul class="two two_3">
                <li>7</li>
                <li>8</li>
                <li>9</li>
            </ul>
        </li>
    </ul>
</div>

Cabe señalar que la navegación de primer nivel se cambia a una disposición horizontal (flotante: izquierda), la navegación de segundo nivel está configurada para que no se muestre al principio (pantalla: ninguna), y la navegación de segundo nivel se muestra cuando el mouse se mueve a la navegación de nivel superior (pantalla: bloque) )

CSS y su explicación:

*{
    margin: 0;
    padding: 0;
}
ul,li{
    list-style: none;   /*去掉一级导航的样式*/
}
.one{      /* 设置一级导航的初始样式 */
    width: 600px;
    background-color: coral;
    height: 30px;
    margin:  auto;
}
.one li{     /* 设置列表项的样式 */
    float: left;    /* 将一级导航的列表进行浮动 改为横向排列 */
    width: 200px;
    text-align: center;
    line-height: 30px;
}
.one li:hover{   /* 当鼠标移上时一级导航时的样式 */
    background-color: honeydew;   /* 当鼠标移上时背景颜色的样式 honeydew */
    color: red;   /* 字体颜色 */
}
.two{
    display: none;   /* 将二级导航隐藏显示 */
}
.one li:hover .two{
    display: block;   /* 当鼠标移到一级导航时  二级导航显示 */
}
.two li{
    background-color: cadetblue;   /* 设置背景颜色 cadetblue */
}
.two li:hover{
    background-color: honeydew;   /* 当鼠标移上时背景颜色的样式 honeydew */
}

Efecto:
en este momento, el mouse está 2 arriba