JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navlist">
    <ul>
        <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>
        <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>
    </ul>
</div>

CSS

#navlist {
    font-family: "Helvetica Neue", Helvetica, Arial, "微軟正黑體", sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
#navlist a:link {
    color: black;
    text-decoration: none;
}
#navlist a:visited {
    color: black;
}
#navlist a:hover {
    color: deepPink;
}
#navlist ul {
    background-color: azure;
    margin: 5px 0px;
}
#navlist li {
    display: block;
    float: left;
    margin: 0px 5px;
    position: relative;
    padding: 0.5em;
    line-height: 1em;
    z-index: 5;
}
#navlist ul ul {
    display: none;
    width: 150px;
    position:absolute;
    top: 3em;
    left: 0;
}
#navlist li li {
    clear: both;
}
#navlist ul > li:hover > ul,
#navlist ul > a:hover + ul,
#navlist ul > li.menu-active > ul {
    display: block;
}

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