Как решить проблему с появлением и исчезанием блока на jquery

Добрый день! Помогите решить проблему. У меня есть список

<ul>
<li class="roditel">
<h3>Меню 1</h3>
<div class="block">
<ul>
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
</ul>
</div>
</li>
</ul>

Нужно сделать плавное появление и скрытие блока div, для этого я использую hide() и show()

$(document).ready(function() {
$(".roditel").mouseover(function() {
$(".block").show(1000);
}).mouseout(function() {
$(".block").hide(1000);
});
});

Все получается, блоки скрываются и появляются плавно, НО, когда я навожу на сам блок что бы нажать на ссылку начинается каша. Блок начинает то появляться то исчезать по несколько раз пока я не перезагружу страницу.

Подскажите как это исправить?! За ранее спасибо!!!

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.