Jquery 不带列表的悬停菜单

我有一个超级菜单，我想在悬停时显示，并保持打开状态，直到用户离开超级菜单或触发区域。我有它的工作onClick，但我似乎无法让它工作在悬停。任何帮助都将不胜感激

<div class="down">
    <div id="showb">
        <a href="#" id="menu-show" class="down"></a>
    </div><!-- end show button -->
    <div id="hideb">
        <a href="#" id="menu-hide" class="up"></a>
    </div><!--end hide button -->   
    <div id="menu" style="display: block;">
        <div class="menu-main">Menu Contents</div>
        <div class="menu-bottom"></div>
    </div>
</div>

    // hides the menu as soon as the DOM is ready
    // (a little sooner than page load)
    jQuery('#menu').hide();
    jQuery('#hideb').hide();
    // shows the menu on clicking the noted link
    jQuery('a#menu-show').click(function() {
        jQuery('#showb').hide();
        jQuery('#hideb').show();
        jQuery('#menu').slideDown();
        return false;
    });
    // hides the menu on clicking the noted link
    jQuery('a#menu-hide').click(function() {
        jQuery('#showb').show();
        jQuery('#hideb').hide();
        jQuery('#menu').slideUp();
        return false;
    });

菜单内容
//DOM就绪后立即隐藏菜单
//（比页面加载快一点）
jQuery（“#菜单”）.hide（）；
jQuery（'#hideb'）.hide（）；
//显示单击注释链接时的菜单
jQuery（'a#菜单显示'）。单击（函数（）{
jQuery（'#showb'）.hide（）；
jQuery（'#hideb'）.show（）；
jQuery（“#菜单”）.slideDown（）；
返回false；
});
//单击注释的链接时隐藏菜单
jQuery（'a#菜单隐藏'）。单击（函数（）{
jQuery（'#showb'）.show（）；
jQuery（'#hideb'）.hide（）；
jQuery（“#菜单”）.slideUp（）；
返回false；
});

你也可以在这里看到

---

菜单内容
jQuery（文档）.ready（函数（）{
//打开
jQuery（“#显示菜单”）.bind（'mouseenter'，function（）{
//增加我们集装箱的高度
jQuery（“#菜单”）.height（'300px'）；
//做主动画
jQuery（“#显示菜单”）.stop（）.css({
“背景位置”：“底部”
}, 300);
jQuery（“#巨型菜单”）。向下滑动（500）；
});
//接近
函数closeMainNav（）{
jQuery（“#显示菜单”）.stop（）.css({
“背景位置”：“顶部”
}, 300);
jQuery（“#mega menu”）.slideUp（500）；
jQuery（“#菜单”）.height（'17px'）；
}
//发生以下情况时关闭
jQuery（“#menu”）.bind（'mouseleave'，closeMainNav）；
});

---

对于click版本更好，我使用了toggleClass和slideToggle。以这种方式编写的代码要短得多。请看这里的演示

菜单内容

菜单项1
菜单项2
菜单项3

更多HTML内容
jQuery（文档）.ready（函数（）{
//DOM就绪后立即隐藏菜单
//（比页面加载快一点）
jQuery（“#菜单”）.hide（）；
//显示单击注释链接时的菜单
jQuery（'a#菜单显示'）。单击（函数（）{
//切换指示器箭头
jQuery（'a.down'）.toggleClass（'up'））
jQuery（“#菜单”）.slideToggle（）；
返回false；
});
});

为什么不做一个替代？

解决方案的问题是html和css的布局。我在这里做了调整

---

这不会隐藏up按钮，而是交换类。需要处理的动画之间有一点差距，但我认为这仍然取决于元素的定位。也许把鼠标盖绑在周围的div上是值得的

谢谢你的建议。我最终得到了这个（用你的css替换向上/向下指示器TommyBs，谢谢！）我需要菜单中的html内容。所以我认为这个解决方案对我不起作用。我还需要它是动态的，与我的数据库一起工作。“HTML内容”可以通过CSS解决方案获得，您可以将任何您喜欢的内容放入

。从您粘贴的代码来看，完整的HTML本身似乎是作为一个整体创建的（而不是通过JS创建或通过AJAX加载的部分），因此CSS解决方案的工作方式与jQuery解决方案几乎相同（从纯HTML结构的角度看）。但缺点是，制作动画（如淡入淡出）会比较困难，而且根本不会在旧浏览器上制作动画，这是jQuery能够解决的问题。

    <div id="menu">
    <div id="show-menu">
    </div>
</div>
<div id="mega-menu">
    <div class="menu-main">Menu Contents</div>
    <div class="menu-bottom"></div>
</div>

jQuery(document).ready(function() {

    // open
    jQuery('#show-menu').bind('mouseenter', function() {

        // increase the height of our container
        jQuery('#menu').height('300px');

        // do the main animation
        jQuery('#show-menu').stop().css({
            'backgroundPosition': 'bottom'
        }, 300);
        jQuery('#mega-menu').slideDown(500);
    });


    // close
    function closeMainNav() {
        jQuery('#show-menu').stop().css({
            'backgroundPosition': 'top'
        }, 300);
        jQuery('#mega-menu').slideUp(500);
        jQuery('#menu').height('17px');
    }

    // close when the following happens
    jQuery('#menu').bind('mouseleave', closeMainNav);
});

    <a href="#" id="menu-show" class="down"></a>

<div id="menu">
    <div class="menu-main">
        Menu Contents
        <ul>
            <li>Menu Item 1</li>
            <li>Menu Item 2</li>
            <li>Menu Item 3</li>
          <div class="clear"></div>
        </ul>
        More HTML content
    </div>
    <div class="menu-bottom"></div>
</div>

jQuery(document).ready(function() {
    // hides the menu as soon as the DOM is ready
    // (a little sooner than page load)
    jQuery('#menu').hide();
    // shows the menu on clicking the noted link
    jQuery('a#menu-show').click(function() {
        // toggles the indicator arrow
        jQuery('a.down').toggleClass('up')
        jQuery('#menu').slideToggle();
        return false;
    });
});