即使我将鼠标悬停在菜单按钮上，也保持下拉菜单可见，因为我仍然将鼠标悬停在子菜单链接上答案

【问题标题】：keep the dropdown menu visible even if i mouseout the menu button because i am still hovering over sub-menu links即使我将鼠标悬停在菜单按钮上，也保持下拉菜单可见，因为我仍然将鼠标悬停在子菜单链接上
【发布时间】：2011-07-03 02:00:27
【问题描述】：

我有一个导航菜单，我使用 css 和 jquery 来显示或隐藏子菜单，我所做的是当我鼠标输入按钮时，我 slideDown 保存子菜单中的链接的 ul，当我鼠标移出时我使用 slideUp navmanu 中的按钮，我想不通，如果我悬停子菜单中的链接，如何停止 slideUp 动作，如果我的鼠标没有悬停在子菜单中的任何链接上，如何激活它？？

    #button {
        border:2px solid #04076A;
        margin-top:50px;
        width:100px;
        padding:5px;
        text-align:center;
        background-color:#5555FF;
}

#button:hover {
                background-color:#2AAAFF;
}

#button a {
            font-family:Arial;
            text-decoration:none;
            display:block;
}

#button a:hover {
                color:#fff;
}

#DDMenu {
        width:100px;
        padding:5px;
        border:2px solid #515248;
        display:none;
}

ul {
    margin:0px;
    padding:0px;
    list-style:none;
}

ul li {
        margin:0px;
        padding:0px;
        background-color:#B8B8B0;
        opacity:.1;
}

ul li a {
        display:block;
        text-align:center;
        text-decoration:none;
}

ul li a:hover {
        background-color:#DADAD6;
}

HTML：

<div id="button">
<a href="#">Button 1</a>
</div>

<div id="DDMenu">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>
</div>

jQuery 部分：

 $(document).ready(function() {

    $('#hide').click(function(){
    $('#contents').slideToggle();
    return false; // should return false to prevent page loading
    });

    $('#button').mouseenter(function() {
    $('#DDMenu').slideDown();
    });

    $('#button').mouseleave(function() {
    $('#DDMenu').slideUp();
    });
});

有什么想法吗？？

【问题讨论】：

标签： php javascript jquery

【解决方案1】：

可能的解决方案之一：

1) 使用 subMenu 项目围绕按钮创建包装 div，例如

<div id="menu">
  // your code here
</div>

CSS：

#menu {
    width: 100px
}

2) 将 slideDown/slideUp 事件附加到该 div 而不是按钮

$('#menu').mouseenter(function() {
  $('#DDMenu').slideDown();
});

$('#menu').mouseleave(function() {
  $('#DDMenu').slideUp();
});

在这里测试：http://jsfiddle.net/KLYBJ/

【讨论】：