JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Navbar_frame">

        <ul class="Navbar_ul">
            <li>首頁</li>
            <li>全部商品</li>
            <li>全部品牌</li>
            <li onclick="display_nav()">關於我們

                <ul class="Navbar_ul2">
                    <li>團隊介紹</li>
                    <li>企業宗旨</li>
                    <li>創業故事</li>
                </ul>

            </li>   
        </ul>

    </div>

CSS

.Navbar_frame{

    width: 100%;
    height: 50px;

    font-family: Comic Sans MS , Microsoft JhengHei;

    background-color: rgba(0,0,0,0.4);
}

.Navbar_ul{
    list-style: none;
    padding-left: 0;

    height: 100%;

    text-align: center;
    align-items: center;

    display: flex;
    justify-content:space-evenly; 

    cursor: pointer;

    /*border: 1px solid red;*/
}

.Navbar_ul li{

    width: 25%;
    height: 50px;

    line-height: 50px;
    font-size: 24px;
    
    /*border: 1px solid red;*/
}
.Navbar_ul li:hover{
    background-color:rgba(252, 252, 252, 0.4);
}


.Navbar_ul2{
    list-style: none;
    padding-left: 0;

    width: 100%;
    max-height: 0;

    overflow: hidden;


    transition: 0.5s;

    background-color: rgba(0,0,0,0.4);

    /*border: 1px solid red;*/
}
.Navbar_ul2 li{
    width: 100%;


    /*border: 1px solid red;*/
}
.Navbar_ul2 li:hover{

    background-color:rgba(252, 252, 252, 0.4);

}

JavaScript

function display_nav(){

    none_nav = document.querySelector('.Navbar_ul2');


    if(none_nav.style.maxHeight != ""){
        none_nav.style.maxHeight = null;
    }
    else if(none_nav.style.maxHeight == ""){
        none_nav.style.maxHeight = none_nav.scrollHeight + "px";
    }


}