Как сделать субменю по hover?

Question

[habrazhitel]

Подскажите, есть субменю, которое изначально не видно и появляется при наведении на пункты меню. Так вот, я сделал так:

$('.menu li').hover(function(){
			$('.submenu').toggle('fast')
		});

Но если убрать курсор с пункта меню, то субменю пропадает, подскажите, пожалуйста, как решить это.
Разметка такая (то есть меню и субменю вложены в общий контейнер и идут друг за другом):

<ul class="menu"></div>
<ul class="submenu"></div>

Answer 1

[Дима Паутов]

Писать ховер нужно правильно

$('.menu li').hover(function(){
			$('.submenu').addClass('fast')
		}, function(){
$('.submenu').removeClass('fast')
});

Comments

[habrazhitel]

не работает

[Дима Паутов]

отлично работает jsfiddle.net/f791s7ba/. Плохо руками вставляете. И еще, у вас список див закрывает в разметке

[habrazhitel]

ну да, здесь работает. Но ведь это не решает мою проблему, т.к. всё равно не получается попасть мышкой на субменю. Но у меня в коде не класс добавлялся, а скорость появления/исчезания субменю) вот jsfiddle.net/f791s7ba/1

[Евгений Петров]

@habrazhitel а почему они без вложений? Зачем блок, зависящий от наведения на пункт меню, располагать отдельно?

[Евгений Петров]

@habrazhitel а насяёт плавности — есть transition и animation.

Answer 2

[Андрей Ежгуров]

А зачем вообще jQuery, когда в твоём случае достаточно css?

HTML:

<ul class="menu">
  <li>Первый пункт меню</li>
  <li>Пункт с подменю
    <ul class="submеnu">
      <li>Первый пункт подменю</li>
      <li>Второй пункт подменю</li>
    </ul>
  </li>
  <li>Третий пункт меню</li>
</ul>

И CSS:

.submenu {
  display: none;
}

.menu>li:hover>.submenu {
  display: block;
 /* всё прочее, что у тебя в классе fast */
}

Comments

[habrazhitel]

такой вариант знаю, но нужен именно когда 2 блока друг под другом, без вложений. И там не класс fast, там не toogleClass, а именно toogle (то есть show/hide), fast - быстро раскрывает/скрывает.

Answer 3

[vohaha]

Если я правильно Вас понял, то посмотрите это видео. Должно помочь.
https://www.youtube.com/watch?v=QKRmRpq5CQc&index=...