JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navigation">
    <li>Home
        <ul class="sub-menu">
            <li>陈三</li>
            <li>陈四</li>
            <li>陈五</li>
        </ul>
    </li>
    <li>About</li>
</ul>

CSS

.navigation>li {
    float:left;
    margin-right:10px;
    background:#0175cc;
}
ul, li {
    list-style:none;
    padding:0;
}
.navigation>li:last-child {
    display:none;
}

JavaScript

var t;

$('.navigation>li').eq(0).on('mouseenter',

function () { //鼠标滑入时触发的函数
    clearTimeout(t);
    $('.toggle').show();
});
$('.navigation>li').eq(0).on('mouseleave',

function () { //鼠标滑出时触发
    t = setTimeout(function () {
        $('.toggle').hide();
    }, 1000); //1秒后自动隐藏 About
});

$('.toggle').mouseenter( //鼠标如果滑入 About，则取消 setTimeout 埋下的定时函数

function () {
    clearTimeout(t);
});
$('.toggle').mouseleave( //鼠标滑出 About 则隐藏它

function () {
    $(this).hide();
});