JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navlist">
    <ul>
        <li>
            <a href="#">
                最新消息<br>
                News
            </a>
        </li>
        <li>
            <a href="javascript:void(0)">
                課程<br>
                Program
            </a>
            <ul>
                <li><a href="#">常態課程，很長的項目</a></li>
                <li><a href="#">預約型課程</a></li>
                <li><a href="#">營隊課程</a></li>
                <li><a href="#">課程Q&amp;A</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0)">
                關於<br>
                About
            </a>
            <ul>
                <li><a href="#">簡介</a></li>
                <li><a href="#">宗旨</a></li>
                <li><a href="#">信念</a></li>
                <li><a href="#">經歷</a></li>
                <li><a href="#">照片</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

#navlist, #navlist ul, #navlist li , #navlist a {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: "Helvetica Neue", Helvetica, Arial, "微軟正黑體", sans-serif;
    font-weight: bold;
}
#navlist a {
    display: block;
}
#navlist ul {
    list-style-type: none;
}
#navlist a:link {
    color: black;
    text-decoration: none;
    transition: color 0.3s;
}
#navlist a:visited {
    color: black;
}
#navlist a:hover {
    color: deepPink;
}
#navlist > ul { /*第一層選單*/
    height: 42px;
    background-color: rgb(135,206,235);
    background-color: rgba(135,206,235,0.5);
    border-radius: 10px;
    padding: 0 15px;
}
#navlist > ul > li { /*第一層選單項目*/
    display: block;
    float: left;
    position: relative;
    line-height: 1em;
    text-align: center;
    transition: background-color 0.5s;
}
#navlist > ul > li:hover {
    background-color: rgb(135,206,250);
    background-color: rgba(135,206,250,0.5);
}
#navlist > ul > li > a {
    padding: 0.5em 15px;
}
#navlist ul ul { /*第二層選單*/
    /*display: none;*/
    display: block;
    overflow: hidden;
    max-height: 0px;
    transition: max-height 0.2s;
    
    width: 180px;
    position: absolute;
    top: 3em;
    left: 0;
    background-color: orange;
    box-shadow: 6px 6px 3px #888888;
    border-radius: 10px;
}
#navlist li li { /*第二層選單項目*/
    text-align: left;
    margin: 0px 0px;
    position: relative;
    line-height: 1em;
    z-index: 5;
    transition: background-color 0.5s;
}
#navlist li li:hover {
    background-color: yellow;
}
#navlist li li a {
    padding: 0.5em 20px;
}
#navlist ul > li:hover > ul,
#navlist ul > a:hover + ul,
#navlist ul > li.menu-active > ul {
    display: block;
    max-height: 300px;
}

JavaScript

(function($){
    $(document).ready(function(){
        $('#navlist li').hover(function(){
            $('#navlist li').removeClass('menu-active');
            $(this).addClass('menu-active');
        }, function(){});
        $('#navlist li').click(function(){
            if($(this).hasClass('menu-active')){
                $('#navlist li').removeClass('menu-active');
            }else{
                $('#navlist li').removeClass('menu-active');
                $(this).addClass('menu-active');
            }
        });
    });
})(jQuery);