Javascript 特殊下拉菜单

我试图用下面的HTML结构实现一个简单的下拉菜单。这种结构是强制性的（我认为），如下图所述

<nav role="navigation">
    <ul id="main-menu" class="nav top-nav clearfix">
        <li id="menu-item-1" class="menu-item"><a href="#">Menu 1</a></li>
        <li id="menu-item-2" class="menu-item"><a href="#">Menu 2</a></li>
        <li id="menu-item-3" class="menu-item"><a href="#">Menu 3</a></li>
    </ul>
    <ul id="sub-menu-1" class="sub-menu nav clearfix">
        <li class="menu-item"><a href="#">Sub Menu 1.1</a></li>
        <li class="menu-item"><a href="#">Sub Menu 1.2</a></li>
        <li class="menu-item"><a href="#">Sub Menu 1.3/a></li>
    </ul>
    <ul id="sub-menu-2" class="sub-menu nav clearfix">
        <li class="menu-item"><a href="#">Sub Menu 2.1</a></li>
        <li class="menu-item"><a href="#">Sub Menu 2.2</a></li>
        <li class="menu-item"><a href="#">Sub Menu 2.3/a></li>
    </ul>
</nav>

我非常确信有更好的方法来做到这一点

我也建立了一个更好的理解

//show sub menu when we hover over an item
$('nav #main-menu > .menu-item')
 .on('mouseenter', function() {
    $('.sub-menu').hide();
    var id = $(this).attr('id');
    id = id.substr(id.length - 1);
    $('#sub-menu-' + id).show();
  });

//hide submenu when the mouse goes away
$('nav').on('mouseleave', function() { $('.sub-menu').hide(); });

在这里修改您的小提琴：

编辑 添加此行以符合注释中的规格

$('.sub-menu').on('mouseleave', function() { $(this).hide(); });

---

这是因为当您将鼠标悬停在子菜单中时，实际上是将鼠标悬停在主菜单外，并且会调用off hover函数。处理完整解决方案。仅CSS解决方案。这很粗糙，但你应该能够理解并适应它。啊，这是一个很好的观点。我已经删除了我的答案，因为它是无效的。一切似乎都好，除了有一个小错误。只有当您将鼠标放在其父菜单项（主菜单项）或其自身上时，子菜单才应处于活动状态（显示）。您的导航在

nav

的所有区域都保持活动状态。例如，如果我将鼠标悬停在

菜单10

=>

子菜单1

上。如果我将指针保持在

nav

区域上，并且不触摸主菜单中的任何其他项目，则子菜单将继续显示不应该这样做的内容。无论如何谢谢你！到目前为止，它似乎按预期工作。我将运行更多的场景，而不是返回一个解决方案。无论如何，非常感谢！

$('.sub-menu').on('mouseleave', function() { $(this).hide(); });