Горизонтальное выпадающее меню на jQuery

Сегодня я расскажу как легко сделать горизонтальное выпадающее меню на jQuery. В силу его понятности и простоты его можно быстро приспособить к любому дизайну. Например, буквально сегодня, я вставил такое горизонтальное меню в проект на CMS Битрикс. К слову, этот скрипт входит в мою копилку сниппетов.

Html-код меню должен иметь такой вид:

Теперь CSS. Вся прелесть данного скрипта в минимальном использовании селекторов. Фактически, нужен всего лишь ID для списка. Итак, нужно выстроить первый уроверь меню в линию, скрыть вложенные уровни и добавить необходимое оформление. На нашем примере это выглядит так:

А вот и сам скрипт. Обработчики событий привязываются к элементам LI. При наведении на пункт меню скрываем предыдущий открытый вложенный список (если виден) и открываем новый. Когда курсор убираем  — ждем 500мс и закрываем список.

Как видите, все действительно просто, а главное кроссбраузерно: IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+

Смотрите ДЕМО.

За скрипт спасибо Javascript Array