Imitation Taobao drop-down menu bar

Record a difficulty I encountered and solved when imitating the Taobao homepage: the realization of the drop-down menu bar at the head of the webpage.

If you encounter a situation similar to mine, you can read on.

Question 1: When the drop-down hidden container is placed in the same container as the header, the header will be stretched after the pull-down effect is realized

Problem 2: When the hidden menu bar and the table header are placed in different containers, the mouse event does not occur, resulting in the hidden part cannot be displayed

 My solution:

1. On the basis of the second question, that is to separate the hidden menu bar and the table header into different containers.

        <!-- 网站菜单栏 -->
        <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. Then set the basic style of each area separately, including the mouseover style of the header "Mainland China", as well as the hidden area style and the background color style of the mouseover, as follows:

/* 头部菜单栏 */
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. I use jQuery to write it here, and you can also write it in a language you are familiar with such as JavaScript or vue.

Add the mouse to the "Mainland China" in the head of the html to display the hidden part, and the container is hidden when the mouse leaves the hidden container.

<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>

The desired effect can be achieved!

If there is something wrong, please correct me