Проблема с подменю

329

15 декабря 2016, 16:22

Есть вот такое выпадающее меню, которое нужно реализовать с помощью "указателей-треугольников". Эти указатели сделаны с помощью псевдоэлементов :before и :after, которые применяются к каждому блоку подменю (всего 3 блока подменю).

Существует следующая проблема:

Навожу мышкой на "каталог товаров".
Выпадает подменю 1-го уровня ("мебель для спальни" и т.д. - см. картинку).
Чтобы перейти мышкой на это подменю, мне нужно двигать ее через указатель-треугольник.
если двигать курсор не через указатель, а через пространство между "каталогом" и подменю, то подменю исчезает.

Есть ли решение проблемы, при котором наведя курсор на "каталог товаров" и двигая мышь вниз не через треугольный указатель, подменю не исчезнет?

Answer 1

Здесь единственный верный вариант - задержка исчезновения. Никаких перекрытий быть не должно. Ещё можно загнаться и как на Амазоне вычислять треугольную область в которой скрытия не происходит, но это явно не вариант в данном случае. :)

Answer 2

Есть. Вот несколько вариантов:

Показывать элемент в обёртке, которая касается предыдущего меню - при этом hover будет сохраняться.
Использовать задержку исчезновения (например, через анимацию). Тут может оказаться проблемой, что анимации не работают со свойством display.
Использовать ещё один псевдоэлемент для покрытия участка между двумя меню прозрачным слоем для сохранения hover.