用js实现鼠标悬停出现二级菜单之后的问题

怎么用js设置啊 我想鼠标悬停出现二级菜单，然后去点击二级菜单里面的项，但是不知道怎么去设置这个操作，就是想鼠标离开二级菜单之后菜单才消失，

jquery给一级和二级菜单绑定hover事件，控制关键字，用来控制一级和二级菜单的状态。
同时通过控制关键字的值，通过判断，动态给一级菜单和二级菜单添加class
从而实现动态控制二级菜单的显示与隐藏

图片说明

鼠标悬停出现二级菜单只用css就可以实现

<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1" />
    <meta charset="UTF-8" />
<style type="text/css">
#menu,#menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#menu>li:hover {
    background-color: #9cf;
}
#menu>li {
    position: relative;
    width: 100px;
    height: 20px;
    float: left;
    background-color: #9ff;
}
#menu>li>ul {
    position: absolute;
    min-width: 100%;
    top: 100%;
    background-color: #cff;
    display: none;
}
#menu>li:hover>ul {
    display: block;
}
#menu>li li:hover {
    background-color: #99f;
}
</style>
</head>
<body>
<ul id="menu">
    <li>菜单1
        <ul>
            <li>子菜单1-1</li>
            <li>子菜单1-2</li>
            <li>子菜单1-3</li>
            <li>子菜单1-3</li>
        </ul>
    </li>
    <li>菜单2
        <ul>
            <li>子菜单2-1</li>
            <li>子菜单2-2</li>
            <li>子菜单2-3</li>
        </ul>
    </li>
</ul>
</body>
</html>

其实说白了就是CSS伪类hover+active去触发二级菜单，在二级菜单中使用js的onclick事件去触发你所想要的效果

https://blog.csdn.net/qianqian_blog/article/details/83419307