Javascript-форум - Непонятно поведение скрипта.

Здравствуйте, столкнулся с такой проблемой.
Есть у меня маленький скрипт

$(document).ready(function() {
	
	$("div.home-button").mouseover(function() {
		$("#menu").addClass("soro");
	});
	
	$("#menu").mouseout(function() {
		$("#menu").removeClass("soro");
	});
	
});

и, по-идее, суть его понятна и ясна, и работать он должен предельно просто.

А именно: есть на странице кнопка, и есть элемент с id="menu" - менюшка.

<header>
	<section class="home">
		<div class="home-button">Home</div>
		<div id="menu"><a>b1</a><a>b2</a><a>b3</a><a>b4</a><a>b5</a></div>
	</section>
	<section>
		<a>Ссылка 1</a>
		<a>Ссылка 2</a>
	</section>
</header>

Суть в том, что при наведении на кнопку этой менюшке должен присваиваться дополнительный класс, пусть будет visible, а при отведении курсора с этого элемента - класс должен убираться. Эта менюшка появляется в левом верхнем углу экрана, то есть перекрывает собой кнопку. Казалось бы - все просто. Навели на кнопку - добавили атрибут. Отвели с менюшки - убрали атрибут. НО, как обычно, все не так гладко.

Дело в том, что когда мышь уже находится на этом элементе, и если я сдвигаю курсор с одного дочернего элемента (a) на другой (тот, что пониже), то менюшка просто закрывается, как будто я вывел мышь за ее пределы, хотя на самом деле мышь я вывел за пределы дочернего элемента, а на основном (менюшке) она осталась.

Объясните, пожалуйста, как с этим бороться :help: