CSS - Подменю исчезает, когда я пытаюсь навести курсор

Question

Я просмотрел похожие темы и попробовал несколько решений (z-index, position, пытаясь идентифицировать перекрывающиеся элементы) и не могу понять, почему, когда я пытаюсь щелкнуть элемент подменю, он исчезает. Страница находится ниже:

http://aboutbeingconnected.com/consulting/

Единственная вкладка меню с подменю «Консалтинг».

Любые идеи, в которых проблема?

Answer 1

Благодаря вашей подменю быть position: absolute с top: 40px это означает, что есть 40px разрыв ниже li. Когда ваша мышь перемещается с li и в 40px вы больше не паря над li, и, следовательно, li:hover не запускается.

Одним из решений является установка top быть 100% от родительского элемента:

.sf-menu li:hover ul { 
    top: 100%; 
} 

Это позволит сократить разрыв между родительским и дочерним меню, но вы можете увидеть, как там сейчас нет зазора между элементами ,

Answer 2

Все сводится к 40-процентному промежутку, установленному с помощью .sf-menu li: hover ul. .Sf-menu li.sfHover ul {top: 40px}.

Абсолютное позиционирование вытягивает подменю из потока документа - хотя он все еще находится в HTML как потомок родительского li, он больше не находится в пределах его границ. Поэтому попробуйте мышь от одного к другому, и вы оставили li, отменив его поведение наведения, прежде чем приблизиться к подменю.

Как сохранить тот же внешний вид и получить ожидаемую функциональность вы бы хотели:

1. Нет больше позиции абсолютной для .SF-меню ул. Храните его в потоке документа.
2. Приложите фоновое изображение маленькой стрелки вверх к UL. Добавьте лишнюю белую полоску вверху, если вы хотите больше визуального пространства.
3. Примените фоновое изображение/цвет серого к ли. Нанесите верхнюю и нижнюю прокладку, чтобы получить нужный вам внешний вид. (Маржа также сделает это, если вам это не нужно, чтобы ее можно было щелкнуть).