Я пытаюсь создать мобильное вертикальное раскрывающееся меню, но у меня возникает проблема с отображением элементов подменю с помощью :focus для обоих вариантов.
Я нашел обходной путь с помощью:focus для подменю и :focus-within для его элементов.
Это решение работает и отображает элементы подменю только для Google Chrome, в то время как другие браузеры, такие как Samsung, Интернет и UC, не отображают ничего, кроме:focus подменю.
Я нашел другое решение, используя :hover для обоих, и оно работает почти для всех браузеров.
У меня есть два вопроса:
- Почему он работал только с Chrome?
- Как использовать
:focus как для подменю, так и для его элементов?
Используемый CSS:
.main-nav a {
color:black;
display: block;
padding: 10px 3px 10px 3px;
font-size: 20px;
text-align: center;
font-family: 'hayah';
border-radius: 25px;
transition: border-radius 0.2s ease-in;
}
.main-nav a:hover {
background:#D7D7D7;
border-radius:25px 25px 0 0;
-webkit-transition: border-radius 0.1s ease-in;
-moz-transition: border-radius 0.1s ease-in;
-o-transition: border-radius 0.1s ease-in;
transition: border-radius 0.1s ease-in;
display: block;
}
.main-nav-ul ul {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
opacity: 0;
max-height: 0;
overflow: hidden;
background-color: #D9D9D9;
color: black;
margin-bottom: 10px;
margin-top: 5px;
border-radius: 0 0 25px 25px;
font-size: 12px;
}
.main-nav-ul li:hover ul {
opacity: 1 !important;
max-height: 400px !important;
color: black;
background-color: #E2E2E2;
display: block;
}