Меню CSS Dropdown Hover issue

Question

У меня проблема с отзывчивым списком переходов, в котором, если вы медленно перемещаете мышь из родительской ссылки, вместо этого появляется подменю для последнего родительского элемента.

Я загрузил пример по адресу: http://webe.emv3.com/aps/twelve/primary.html

Если вы наведите курсор мыши на «Top Up Card», затем переместите мышь медленно вниз по направлению к подменю, помощь активируется вместо этого.

У вас есть идеи, почему это может произойти?

Answer 1

Я обнаружил причину. Был вопрос с границами на линии 153-156:

.rdd-menu .submenu-panel { 
    border-radius:0 0 10px 10px; 
    border:1px solid #ccc; 
    border-top:0; 

Даже если верхняя граница была удалена, имея слева, справа, и нижние границы вызвали проблему. Снятие их разрешило.

Я ценю вашу помощь в этом. Спасибо.

Answer 2

Это потому, что .rdd-menu .submenu-panel не скрыт и/или расположен в стороне. Поэтому, когда вы: наведите указатель мыши на родителя, все .submenu-panel все еще видны. Наличие height:0 не скрывает элемент.

Простой:

.rdd-menu .submenu-panel { 
    display: none; 
}  

.rdd-menu li:hover > .submenu-panel { 
    display: block; 
} 

будет исправить. Вы можете игнорировать свои объявления высоты.

Редактировать: Я только что заметил, что у вас были переходы на них. Вы можете просто поместить закадровый в подменю, чтобы сохранить нетронутыми переходы:

.rdd-menu .submenu-panel { 
    top: -10%; 
}  

.rdd-menu li:hover > .submenu-panel { 
    top: 100%; 
}