Добрый день.
Сначала опишу то, что есть.
Сделал горизонтальное меню по такой схеме.
<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 на нём, но затея не очень нравится.
Интересно, есть ли способ проще этого?
