Question

我正在建立一个下拉菜单。主图像具有翻转和滚动事件切换显示包含我的弹出菜单的div。麻烦的是当我滚出主图像时，我的弹出菜单消失了（显然！）。我希望能够在弹出菜单上移动mose，而不会消失。我还希望图像具有翻转状态 - 这是我的代码：

<a class="mypage" href="mypage.html" id="mypageid" onmouseover="document.getElementById('menu-container').style.display = 'block';"  onmouseout="document.getElementById('menu-container').style.display = 'none';"></a>
<div id="menu-container">
    <ul>
        <li><a href="#"><img src="images/nav/button1.jpg" alt="" width="126px" height="21px"/></a></li>
        <li><a href="#"><img src="images/nav/button2.jpg" alt="" width="126px" height="21px"/></a></li>
        <li><a href="#"><img src="images/nav/button3.jpg" alt="" width="126px" height="21px"/></a></li>
    </ul></div>

Answer 1

用于解决此问题的常见模式是延迟使用计时器隐藏菜单。如果用户的鼠标在该计时器触发之前重新进入触发器或菜单本身，则清除计时器（和隐藏）。

var menuTimer = null;

$('.mypage, #menu-container').mouseenter(function(e) {
    $('#menu-container').show();
    clearTimeout(menuTimer);
});

$('.mypage, #menu-container').mouseleave(function(e) {
    menuTimer = setTimeout(function() {
        $('#menu-container').hide();
    }, 300);
});

示例：http://jsfiddle.net/xA6MH/

这个概念很容易适应香草JS。

Answer 2

此页面可以为您提供帮助。

http://cssmenumaker.com/css-drop-down-menu

他们有一个菜单制作者，你可以看到CSS是如何工作的。

Answer 3

我强烈建议在A List Apart上阅读这个问题的一个明确解决方案 - Hybrid CSS Dropdowns。

ul简单的弹出菜单

3 个答案: