Всем привет. Как сделать выпадающий блок по примеру на сайте https://ru.stackoverflow.com/. Если навести на "медучереждения" увидите всплывающий темный блок.
Я делаю следующим образом:
<ul>
<li>
<a href="#" class="menu_href">
<img src="images/menu_icon_1.png"/></br>
</br>
<span style="color:#000000;font-size:14px;">МЕДУЧРЕЖДЕНИЯ</span><br>
<span style="color:#9d9d9d; font-size:12px;">адреса, отзывы</span>
</a>
</li>
....... и т д
Ниже блок которые выезжает.
<div class="menu_vipad_1">
<ul class="category">
<li>
<ul class="subcategory">
<li><a href="#">Больницы и стационары</a></li>
<li><a href="#">Поликлиники</a></li>
<li><a href="#">Диспансеры</a></li>
<li><a href="#">Медпункты и амбулатории</a></li>
<li><a href="#">Травмпункты</a></li>
<li><a href="#">Скорая помощь</a></li>
<li><a href="#">Частные медцентры и клиники</a></li>
<li><a href="#">Стоматология</a></li>
<li><a href="#">Центры вакцинации</a></li>
</ul>
</li>
</ul>
</div>
И jqeury
$('.menu_href').hover(function(){
$('.menu_vipad_1').show(200);
},
function(){
$('.menu_vipad_1').hide();
});
т.е. блок выпадает, но только когда я навожу на него мышкой, он исчезает. Как сделать чтобы он оставался при наведении, и исчезал, например, при клике на другое место или при наведении на другое меню?