特殊下拉菜单

Question

我正在尝试使用以下 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>

为了更好地了解我想要实现的目标，我制作了以下插图：

1. 简单的菜单，其中的项目以内联块排列。如您所见，菜单缩放到容器的 100%，并且所有项目都排列在中心。

1. 将鼠标悬停在具有子菜单的菜单项上时。在插图中，菜单 1 具有子菜单 1，它需要在鼠标悬停时显示它，就像简单的 <ul><li><ul></ul></li></ul> 一样。如您所见，子菜单必须缩放到容器的 100%，并且所有项目都安排在中心。

我认为最好的方法是使用 javascript（不确定是否只能使用 CSS），但我有点卡住了。子菜单出现在主菜单项悬停时，但是一旦我将鼠标悬停在子菜单中以便导航，子菜单就会消失。无论如何，这是javascript：

$('nav #main-menu .menu-item a').hover(
    function() {
        var id = $(this).parent().attr('id');
        id = id.substr(id.length - 1);
        submenu = $('#sub-menu-' + id);
        submenu.show();
    }, 
    function() {
        var id = $(this).parent().attr('id');
        id = id.substr(id.length - 1);
        submenu = $('#sub-menu-' + id);
        submenu.hide();
    }
);

我很确定有更好的方法来做到这一点。

我还设置了FIDDLE 以便更好地理解。

Answer 1

//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(); });

在这里修改了你的小提琴：http://jsfiddle.net/3z8MR/10/

编辑 添加此行以符合您在 cmets 中的规范

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