CSS – не повторять преобразование в раскрывающемся списке, если наведение активно ⇐ CSS

[Гость]

Я пытаюсь создать меню навигации, содержащее категории и подкатегории. Когда я навожу курсор на одну из основных категорий, содержащую подкатегории, отображается раскрывающееся меню. Я добавил эффект, чтобы он опустился, как занавес. Это отлично работает. Однако когда я перейду к следующей категории, преобразование повторится. Другими словами, он рухнет, а затем снова расширится. Есть ли способ оставить его открытым, пока я не наведу курсор на что-то, что не содержит подкатегорий?

Элементы с подкатегориями отмечены aria-haspopup="menu", тогда как элементы без подкатегорий отмечены aria-haspopup="false".
>
https://jsfiddle.net/tea6gmpc/

HTML:

• Категория 1 Подкатегория 1
• Подкатегория 2
• Подкатегория 3

[*] Категория 2

• Подкатегория 4
• Подкатегория 5
• Подкатегория 6

[*] Категория 3 CSS:

.container { высота: 3рем; дисплей: сетка; выровнять-элементы: по центру; маржа: 0 1бэр; цвет фона: #c3c3c3; положение: относительное; } /* Оформление списка */ .nav-items > ul[role="menu"] { тип стиля списка: нет; заполнение: 0; маржа: 0; дисплей: гибкий; } /* Оформление элемента списка */ .nav-items > ul[role="menu"] > li[role="menuitem"] { отображение: встроенный блок; минимальная ширина: 4рем; выравнивание текста: по центру; отступ: 0 1рем; } /* Регулировка высоты строки в ссылках */ .nav-items > ul[role="menu"] > li[role="menuitem"] a { высота строки: 3rem; } /* Скрыть подкатегории по умолчанию */ .nav-items .sub-nav-items { непрозрачность: 0; видимость: скрыта; позиция: абсолютная; слева: 0; верх: 3рем; ширина: 100%; цвет фона: серый; /* Эффект слайда */ Transform-Origin: вверху по центру; преобразование: масштаб3d (1, 0, 1); переход: 0,4 с; } /* Отображение подкатегорий при наведении */ .nav-items ul li:hover .sub-nav-items { непрозрачность: 1; видимость: видимая; преобразование: масштаб3d (1, 1, 1); } При наведении курсора на «Категорию 1» я вижу ее подкатегории (Подкатегория 1–3). Когда я навожу указатель мыши на «Категорию 2», я вижу ее подкатегории (Подкатегория 4–6). Но когда я переключаюсь между «Категорией 1» и «Категорией 2», «эффект занавеса» встает на свое место. Я не хочу, чтобы слайд повторялся, если я уже нахожусь в меню. Надеюсь, это имеет смысл.

Пример можно увидеть на сайте Zalando.com. Когда я навожу курсор на пункт меню, меню остается открытым, пока я переключаюсь между категориями. Оно сворачивается только тогда, когда я перестаю наводить курсор на область меню