Меню сворачивается при переводе мыши с заголовка к выпавшему содержимому
 

Добрый день.

Сначала опишу то, что есть.

Сделал горизонтальное меню по такой схеме.

<div id='menu'>
<div class='level_1'>
        <span>Услуги</span>
        <div class='level_2'>
                <a href=''>Item 1.1</a>
                <a href=''>Item 1.1</a> 
                <a href=''>Item 1.1</a>
        </div>
</div>
<div class='level_1'>
        <span>Портфолио</span>
        <div class='level_2'>
                <a href=''>Мероприятия</a>
                <a href=''>Инсталляции</a> 
                <a href=''>Ремонт</a>
        </div>
</div>
</div>

Упрощённо hover для них выглядит так:

$('div.level_1').hover( 
// MouseOver event
function(){
       // Для level_2
       this.childNodes[1].style.display = 'block';
},
// MouseOut event
function(){
       // Для level_2
       this.childNodes[1].style.display = 'none';
} )

DIV'ы c class=level_2 имеют position: absolute. Вследствие этого область (белая рамка) для hover-события оказывается такой.


Но если указатель мыши провести по чёрной траектории, то выбранный пункт будет закрываться. У меня есть непростая идея реализации этого через посадку onmousemove на id='menu' и в глобальной области видимости отслеживать откуда и куда прибыл указатель мыши, выставить минимально время отсутствия на выбранном элементе level_1, скажем, в 500 мс, после этого активировать mouseout на нём, но затея не очень нравится.

Интересно, есть ли способ проще этого?