HTML+CSS+JavaScript

Есть несколько меню один под другим

Так меню расположены изначально:
Меню 3: пункт 1 | пункт2 | пункт 3 | пункт 4 | пункт 5
Меню 2: пункт 1 | пункт2 | пункт 3 | пункт 4
Меню 1: пункт 1 | пункт2 | пункт 3

Теперь мы нажали на Пункт 1:
Меню 3: пункт 1 | пункт2 | пункт 3 | пункт 4 | пункт 5
Меню 2: [подпункт 1] нкт2 | пункт 3 |пункт 4
Меню 1: [подпункт 2]нкт2 | пункт 3
______ [подпункт 3]

Меню 1 и Меню 2 находится под DIV-ом, содержащим подпункты.

Теперь мы навели курсор на Пункт 3 в Меню 3 и подменю Пункта 1 скрылось:
Меню 3: пункт 1 | пункт2 | пункт 3 | пункт 4 | пункт 5
Меню 2: пункт 1 | пункт2 | пункт 3 | пункт 4
Меню 1: пункт 1 | пункт2 | пункт 3

Но если мы наведем курсор на подпункт 1
Меню 3: пункт 1 | пункт2 | пункт 3 | пункт 4 | пункт 5
Меню 2: [подпункт 1] нкт2 | пункт 3 |пункт 4
Меню 1: [подпункт 2]нкт2 | пункт 3
______ [подпункт 3]

То срабатывает событие onmouseover Пункта 1 или Пункта 2 в Меню 2, которые скрыты подпунктами.

Написано много и хорошо.
Явно старались.
Но, увы, всё-равно ничего не понятно.

Лучше бы просто дали ссылку на проблемный скрипт или приаттачили бы его здесь.

У меня не проблемный скрипт. Возможно, я просто не знаю методов.

У меня простое горизонтальное выпадающее меню. Нажимаем на пункт меню и появляются подменю. Они появляются поверх контента, расположенного ниже меню. Так вот, если этот контент будет содержать ссылку, то событие onmouseover обработается, не смотря на то, что эту ссылку перекрывает подменю.

В вышеописанном примере подпункты это отдельный блок, который идет поверх остальных меню. Когда мы наводим курсор на подпункт 1 (отмечен жирным), то срабатывает onmouseover ссылки в меню 2.

>У меня не проблемный скрипт.

Да? Не "проблемный"?
А чего тогда вопросы задаете? :-)


"Проблемный" - это совсем не ругательное слово :-)

Скрипты бывают двух типов:
- или он полностью удовлетворяет всем вашим запросам. Т.е. работает БЕЗ ПРОБЛЕМ;
- или в нём есть какие-то нюансы, кои вас не устраивают и кои вы самостоятельно не можете устранить (ибо, возможно, "просто не знаете методов"). В этом случае скрипт можно назвать (для вас) "проблемным".

Хорошо, назовем мой скрипт проблемным. Но проблемным бы он не был, если бы было только одно меню, поскольку подменю открывались бы ниже меню.

Вот есть событие у ссылки hover, допустим, при наведении на ссылку она становится красной. Пишем в стилях так: A:hover{color:#FF0000;}. Мы навели курсор на ссылку и она стала красной, тут все понятно. Ну а что, если мы навели курсор на ссылку и она стала красной, но мы ее не видим, то есть поверх нее находится блок, который раньше был скрыт, но в результате каких то действий появился. Так вот, как избежать реагирования ссылки в том случае, если поверх нее находится блок.

Блок, находящийся наверху, должен:
- во-первых, ДЕЙСТВИТЕЛЬНО быть НАВЕРХУ (т.е. иметь свойство z-index б_О_льшим, чем у ссылки внизу;
- во-вторых, блок должен ОБЯЗАТЕЛЬНО иметь УКАЗАННЫМ background (т.е. фон должен быть отличным от transparent)

Это все учтено.

Мне нужно чтобы ссылки, закрытые подменю, не обрабатывали событие onmouseover.

Ссылки, закрытые сверху чем-либо, имеющим фон и б_О_льший z-index - не реагируют ни на клик, ни на onmouseover.

Можете удостовериться:

<a href="#" style="position: absolute; top: 10px; left: 10px; z-index: 1" onmouseover="alert ('YES-1')">НЕ РЕАГИРУЕТ</a> <div style="position: absolute; top: 5px; left: 5px; width: 300px; height: 100px;  z-index: 999; background: #000; filter: alpha(opacity=0); opacity: 0"></div> <a href="#" style="position: absolute; top: 120px; left: 10px; z-index: 1" onmouseover="alert ('YES-2')">А ЭТА - РЕАГИРУЕТ, т.к. её DIV не перекрывает</a>

Если ваша ссылка реагирует - значит, вышеуказанные два условия у вас не учтены (хоть вы и утверждаете обратное).

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

Спасибо за помощь. Не нашел бы проблему, если бы не ваш убедительный пример.