javascript - 下拉列表在用户可以将鼠标指针移动到它之前消失

Question

我有一个包含列表项 Home 和 Home 2 的菜单。当我将鼠标悬停在“Home”/“Home 2”上时，会按预期显示该元素的下拉列表。但是，当我将鼠标向下移动到下拉列表时，列表立即消失，我无法访问下拉菜单。

我希望在将鼠标向下移动到下拉列表时下拉列表可见最好使用 jQuery。但是，我无法让它工作。

设计的 HTML 布局是:

 <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
        <div class="dropDownClass"">
            <ul>
                <li>DD Item 4</li>
                <li>DD Item 5</li>
                <li>DD Item 6</li>
            </ul>
        </div>
    </li> </ul>

任何帮助将不胜感激。
谢谢

Answer 1

我会做这样的事情。

HTML:

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

CSS:

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

看看这个 fiddle看看它的实际效果。