Как сделать выпадающий список jQuery?

Question

[vetsmen]

Как сделать выпадающий список на jQuery, чтобы при перемещении курсора на список он не исчезал?

$('.room_hover').hover(function(){
		$('.select_menu').show(200);
	}, function(){
		$('.select_menu').hide(200);
	});

Сейчас делаю так, при перемещении курсора с элемента, на который я навел, на список, у меня начинает дергаться список и потом исчезает.
У списка и у элемента, на который я навожу, одинаковые классы.
Как такие вещи делаются правильнее?

Answer 1

[Immortal_pony]

// Предотвращение закрытия подменю
$('.navbar-main-menu > li, .sub-menu').on('mouseover', function() {             
    clearTimeout(menuItemOpenedTimeout);
});      

// Закрытие всех подменю через 300 миллисекунд в случае покидания мышкой зоны родительского пункта меню
$('.navbar-main-menu > li').on('mouseleave', function() { 
    menuItemOpenedTimeout = setTimeout(function() { 
        $('.sub-menu').hide();
    }, 300); 
});

        

// Открытие подменю
$('.navbar-main-menu > li').on('mouseover', function() {
    // Закрытие всех открытых подменю
    $('.sub-menu').hide();
    
    // Открытие текущего подменю
    $(this).find('.sub-menu').show();
});

Comments

[vetsmen]

Что выполняет "предотвращение закрытия..."? Для чего оно?

[Immortal_pony]

vetsmen, идея такая - подменю не должно закрываться мгновенно, если мышка на долю секунды покинула его область. Это раздражает. Поэтому ставится задержка, через которую будет произведено закрытие. Если мышь пользователя вернулась в область подменю, то задание системе "закрыть подменю через 300 сек" отменяется.