Javascript 在用户将鼠标指针移动到下拉列表之前，下拉列表将消失

我有一份菜单，上面列出了Home和Home 2。当我将鼠标悬停在“主页”/“主页2”上时，该项目的下拉列表将按预期显示。但是，当我将鼠标移到下拉列表时，列表立即消失，我无法访问下拉菜单

我希望在将鼠标向下移动到下拉列表时，下拉列表可见最好使用jQuery。然而，我不能让它工作

设计的HTML布局为：

主页

DD项目1
DD项目2
DD项目3


家庭2
将其添加到
文档中。就绪
功能：

 $('.grid1 ul').hide();   
    $('.grid2 ul').hide();  
    $('.grid1').on('mouseover', function() {
        $('.grid1 ul').show();
    $('.grid1').on('mouseout', function() {
        $('.grid1 ul').hide();
    });
    });

    $('.grid2').on('mouseover', function() {
        $('.grid2 ul').show();
    $('.grid2').on('mouseout', function() {
        $('.grid2 ul').hide();
    });
    });

并将两个
元素的class属性值从
grid
更改为
grid1
，另一个为
grid2
，您需要设置CSS以类似于此：

ul{list-style: none; padding: 3px; margin:0}   
li ul{display:none;}
li.grid:hover ul{display:block}

这将隐藏第二个ul，直到li悬停。
我会这样做

HTML:

看看这个，看看它的行动

ul{list-style: none; padding: 3px; margin:0}   
li ul{display:none;}
li.grid:hover ul{display:block}

<ul class="mega">
<li class="grid">Home
    <ul>
        <li>DD Item 1</li>
        <li>DD Item 2</li>
        <li>DD Item 3</li>
    </ul>
</li>
<li class="grid">Home2
    <ul>
        <li>DD Item 4</li>
        <li>DD Item 5</li>
        <li>DD Item 6</li>
    </ul>
</li> 

ul{
    list-style-type: none;
}

.mega{
    width: 200px;
}

.grid{
    padding: 10px 15px;
    background-color:gray; 
    color: white;
    border: 1px solid black;
}

.grid ul{
    display: none;
}

.grid:hover > ul{
    display: inline;
}