Dropdown menu shows up when you hover the sub-menu item area [требует правки]

330

17 июля 2017, 14:12

Can you help me with the dropdown issue?

https://www.pamdidner.com/category/announcement/ If you hover the mouse under the About item (where submenu is supposed to be) it will show the drop down menu. But this is not very convenient if you need to click some content, which is located in that area.

https://pdidner.staging.wpengine.com/category/announcement/ As you see on the staging server everything works fine and the submenu only appears when you hover the About item.

Tried disabling plugins, deleting all the customly added css/js but it doesn't seem to help.

Thanks in advance

Answer 1

Все зависит от способа появления вложенного списка, в случае где список появляется корректно (при наведении только на About), используется смена значения свойства display. В другом примере изменение свойства opacity.
Для чего так сделано: как Вы можете заметить, при корректном поведении вложенное меню появляется резко, в другом случае появление и исчезновение происходит плавно. Это из-за различных используемых свойств. Дело в том, что свойство display не анимируется, а вот opacity прекрасно поддается анимации, но opacity не скрывает блок на странице, он попрежнему доступен для курсора, только прозрачный, а в правилах указано:

.main-navigation ul li:hover>ul, .main-navigation ul li:focus>ul, .main-navigation ul li.focus>ul {
    opacity: 1;
    .......
}

Т.е. при наведении на на пункт меню установи прозрачность для вложенного в него списка в единицу, но список то вложен в пункт, значит при наведении на сам список это правило сработает, не правда ли. А поскольку opacity не убирает элемент со страницы, а всего лишь делает его прозрачным, мы и наблюдаем такое поведение.