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

Question

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