Здравствуйте, недавно начал изучать javascript с Jquery, сделал меню и 2 скрытых блока и хочу что бы при наведении на ссылку появлялся нужный блок, но почему то он начинает вести себя не так как мне нужно, скрывается и появляется не успев даже навести курсор на блок. Помогите понять как сделать так что бы при наведении на ссылку появлялся блок и не пропадал когда курсор пропадает с ссылки, а при наведении на другую ссылку, появлялся другой блок и пропадал предыдущий блок, не помогает даже задержка. И как сделать компактный код что бы не писать на каждую кнопку новую функцию. Спасибо.
<div class="mn_1" style="display:none;"> block 1</div>
<div class="mn_2" style="display:none;"> block 2</div>
<ul>
<li class="m_1"><a href="#">Menu 1</a></li>
<li class="m_2"><a href="#">menu 2</a></li>
</ul>
$(function(){
$('.m_1').hover(function(){
$('.mn_1').show(1000);
},
function(){
$('.mn_1').hide(1000);
});
});
$(function(){
$('.m_2').hover(function(){
$('.mn_2').show(1000);
},
function(){
$('.mn_2').hide(1000);
});
});