Barra de menú desplegable de imitación Taobao

Registre una dificultad que encontré y resolví al imitar la página de inicio de Taobao: la realización de la barra de menú desplegable en la cabecera de la página web.

Si te encuentras en una situación similar a la mía, puedes seguir leyendo.

Pregunta 1: cuando el contenedor oculto desplegable se coloca en el mismo contenedor que el encabezado, el encabezado se estirará después de que se realice el efecto desplegable.

Problema 2: cuando la barra de menú oculta y el encabezado de la tabla se colocan en contenedores diferentes, el evento del mouse no ocurre, lo que hace que la parte oculta no se pueda mostrar

 Mi solución:

1. Sobre la base de la segunda pregunta, es decir, separar la barra de menú oculta y el encabezado de la tabla en diferentes contenedores.

        <!-- 网站菜单栏 -->
        <header>
            <div class="caidanlan">
                <!-- 菜单分类 -->
                <ul class="caidanlan1">
                    <li class="box1" id="box1">
                        <div class="hd">
                            <span>中国大陆</span>
                            <i class="fa-solid fa-chevron-down"></i>
                        </div>
                    </li>
                    <li class="box2">亲，请登录</li>
                    <li class="box3">免费注册</li>
                    <li class="box4">手机逛淘宝</li>
                    <li class="box5">网页无障碍</li>
                    <li class="box6"></li>
                    <li class="box7"></li>
                </ul>

                <ul class="caidanlan2">
                    <li class="box1">我的淘宝
                        <i class="fa-solid fa-chevron-down"></i>
                    </li>
                    <li class="box2">
                        <i class="fa-solid fa-cart-shopping"></i>
                        购物车</li>
                    <li class="box3">
                        <i class="fa-sharp fa-solid fa-star"></i>
                        收藏夹
                        <i class="fa-solid fa-chevron-down"></i>
                    </li>
                    <li class="box4">商品分类</li>
                    <li class="box5">免费开店</li>
                    <li class="Dividing-line">|</li>
                    <li class="box6">千牛卖家中心
                        <i class="fa-solid fa-chevron-down"></i>
                    </li>
                    <li class="box7">联系客服
                        <i class="fa-solid fa-chevron-down"></i>
                    </li>
                </ul>

                <!-- 隐藏下拉菜单栏 -->
                <div class="yc-cdl">
                    <ul class="bd">
                         <li>全球</li>
                         <li>中国大陆</li>
                         <li>中国香港</li>
                         <li>中国台湾</li>
                         <li>中国澳门</li>
                         <li>韩国</li>
                         <li>马来西亚</li>
                         <li>澳大利亚</li>
                         <li>新加坡</li>
                         <li>新西兰</li>
                         <li>加拿大</li>
                         <li>日本</li>
                         <li>越南</li>
                         <li>泰国</li>
                         <li>菲律宾</li>
                         <li>柬埔寨</li>
                     </ul>
                </div>
            </div>
        </header>

2. Luego configure el estilo básico de cada área por separado, incluido el estilo del mouseover del encabezado "China continental", así como el estilo del área oculta y el estilo de color de fondo del mouseover, de la siguiente manera:

/* 头部菜单栏 */
div {
    display: block;
}

header {
    position:relative;
    width: 100%;
    height: 36px;
    background-color:#f5f5f5;
    color: #3C3C3C;
}

.caidanlan {
    width: 1195px;
    height: 35px;
    text-align: center;
    margin:0 auto; /* 网页内容水平居中，左右留白自动 */
}

.caidanlan ul {
    width: 580px;
    list-style-type: none;
    /* float: left; */
    font-size: 12px;
}


ul.caidanlan1 {
    z-index: 10000;
    float:left;
    /* visibility: visible; */
}

ul.caidanlan2 {
    float:right;
}

.caidanlan ul li {
    float: left;
    padding: 9px 8px;
}

/* 盒子2样式 */
.caidanlan1 .box2 {
    color: #f22e00;
}
/* 地区下拉箭头 */
.fa-chevron-down {
    color: #adadad;
    font-size: 1px;
}


/* 隐藏地区样式 */
.yc-cdl {
    z-index: 10001;
    position: relative;
    /* right: 5px;
    top: 10px; */
    margin-top: -1px;
    width: 242px;
    height: 280px;
    overflow-y: scroll;
    overflow-x: hidden;
        /* 隐藏地区容器 */
    display: none;
}
.yc-cdl ul li {
    width: 242px;
    height: 29px;
    float: initial;
    background: #ffffff;
    text-align: left;
    padding-left: 20px;
    /* display: list-item; */
    
}

/* 鼠标划过显示 */
.box1:hover {
    background-color: #ffffff;
    
}

.yc-cdl li:hover {
    /* display: block; */
    background-color: #f4f4f4;
}


/* 购物车 */
.fa-cart-shopping {
    color: #ff4400;
}
/* 收藏 */
.fa-star {
    color: #adadad;
}
/* 分割线 */
.Dividing-line {
    color: #dddddd;
}

3. Uso jQuery para escribirlo aquí, y también puede escribirlo en un lenguaje con el que esté familiarizado, como JavaScript o vue.

Agregue el mouse a "China continental" en el encabezado del html para mostrar la parte oculta, y el contenedor se ocultará cuando el mouse abandone el contenedor oculto.

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        // 鼠标经过“中国大陆”显示隐藏部分
        $(".hd").hover(function(){
            $(".yc-cdl").show(
                // alert("111")
        )
        // 鼠标离开隐藏容器时容器隐藏
        $("header").mouseleave(function(){
            $(".yc-cdl").hide()
        })
        })
    })
</script>

¡El efecto deseado se puede lograr!

Si hay algo mal, por favor corrígeme.