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

DropDown list disappearing before user can the move mouse pointer to it

本文关键字：消失 移动 鼠标指针 用户 下拉列表      更新时间：2023-09-26

我有一个菜单，其中包含列表项"主页"和"主页"2。当我将鼠标悬停在"主页"/"主页 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>

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

我会做这样的事情。

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

这个小提琴，看看它的实际效果。

你需要将CSS设置为类似于这样：

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

这将隐藏第二个 ul，直到 li 悬停。

在document.ready函数中添加以下内容：

 $('.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();
    });
    });

并将两个<li>元素的类属性的值从两个grid更改为其中一个grid1，另一个grid2。

相关文章：