jQuery: slideDown(), slideUp() и stop()

Question

У меня есть меню. Я планировал:

1. slideDown() подменю (изначально display: none DIV), когда я наведите курсор мыши на полосу меню
2. скрыть подменю slideUp когда мышь вышла.

Вот коды:

<div id="main_menu" onmouseover="$('#submenu').stop(true,false).slideDown();" onmouseout="$('#submenu').stop(true,false).slideUp();">Main Menu</div>
<div id="submenu" style="display: none">Some submenu contents here</div>

То, чего я пытаюсь достичь, это когда я нахожу подменю мыши, подменю удерживает и останавливает мышь (slideUp() анимация. Как мне этого добиться?

Примечание: учитывая, что main_menu и sub_menu не перекрываются.

ОБНОВЛЕНИЕ: вот jsFiddle

Answer 1

Самый простой способ - добавить родительский домен и привязать к нему событие мыши.

HTML

<div id="menu">
    <div id="main_menu">Main Menu</div>
    <div id="submenu" style="display: none">Some submenu contents here</div>
</div>

JS

$('#menu').hover(function () {
    $('#submenu').stop(true, false).slideDown();
},

function () {
    $('#submenu').stop(true, false).slideUp();
});

вот демо jsfiddle. http://jsfiddle.net/vyDVd/

Обновить

Если вы не хотите добавлять родительский домен, вы можете попробовать поставить submenu в main_menu как детское меню.

Я обновляю вашу демоверсию jsfiddle здесь http://jsfiddle.net/9KfYr/2/

Я добавляю 2 атрибута CSS к #submenu сохранить пользовательский интерфейс без изменений.

position:absolute;
top:30px;

И здесь я предлагаю использовать .hover(), предоставляемый jQuery.

Answer 2

На самом деле, я смог добиться этого, используя чистый CSS:

.header-submenu-item {
 display:none;
}
.header-parent-link:hover + .header-submenu-item,
.header-submenu-item:hover {
 display:block;
}

<div class="header-parent-link">Item 1</div>
  <div class="header-submenu-item"></div><!-- Empty submenu -->
<div class="header-parent-link">Item 2</div>
  <div class="header-submenu-item">
    <a href="#">Child Item</a>
    <a href="#">Child Item</a>
    <a href="#">Child Item</a>
  </div>

Он не включает эффект slideDown(), но очень прост. Я полагаю, что скольжение может быть достигнуто с помощью других эффектов CSS.