JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="whmenu">
    <li> <a href="#">關於</a>

    </li>
    <li> <a href="#">技術支源</a>

    </li>
    <li> <a href="#">線上試用</a>

    </li>
    <li> <a href="#">個案分析</a>

    </li>
    <li> <a href="#">服務據點</a>

        <ul>
            <li><a href="#">項目1</a>

            </li>
            <li><a href="#">項目2</a>

            </li>
        </ul>
    </li>
    <li> <a href="#">客服中心</a>

        <ul>
            <li><a href="#">售後服務</a>

            </li>
            <li><a href="#">聯絡方式</a>

            </li>
        </ul>
    </li>
</ul>

CSS

#whmenu {
    background-color: #00559a;
}
#whmenu li {
    display: inline-block;
    position: relative;
    text-align: center;
    padding: 0 20px;
    line-height: 30px;
    margin: 0;
    background-color: #00559a;
}
#whmenu li a {
    color: #fff;
    text-decoration: none;
}
#whmenu li > ul {
    display: none;
    position: absolute;
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: 0px 0px 5px #000;
    z-index: 10;
        
}
#whmenu li > ul li {
    display: block;    
}

JavaScript

$('#whmenu li > ul')
    .parent()
    .hover(function () {
    $(this).find("ul").show()
}, function () {
    $(this).find("ul").hide()
});