特殊下拉菜單

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％，並且所有項目都排列在中間。

2. 將鼠標懸停在具有子菜單的菜單項上時。 在圖示中，菜單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/

編輯添加此行以符合您的評論中的規范

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