Как сделать фокус в выпадающем меню при tab?

Question

[Grep1]

<ul class="main-menu">
					<li class="main-menu-catalog main-menu-item">
						<a href="blank.html" class="main-menu-link">Каталог товаров</a>			
						<ul class="catalog-menu">
							<li><a href="blank.html">Виртуальная реальность</a></li>
							<li><a href="catalog.html">Моноподы для селфи</a></li>
							<li><a href="blank.html">Экшн-камеры</a></li>
							<li><a href="blank.html">Фитнес-браслеты</a></li>
							<li class="catalog-new-line"><a href="blank.html">Умные часы</a></li>
							<li><a href="blank.html">Квадрокоптеры</a></li>
						</ul>
					</li>
					<li class="main-menu-delivery main-menu-item"><a href="blank.html" class="main-menu-link">Доставка</a></li>
					<li class="main-menu-guarantee main-menu-item"><a href="blank.html" class="main-menu-link">Гарантия</a></li>
					<li class="main-menu-contact main-menu-item"><a href="blank.html" class="main-menu-link">Контакты</a></li>
				</ul>

catalog-menu это меню которое открывается. Вопрос в том, что при tab нужно, что бы фокус попадал на пункты меню. Как это сделать? Если по фокусу на main-menu-link открывать меню - таб все равно на него не попадает

Answer 1

[Ankhena]

Использовать :focus-within
https://jsfiddle.net/sw35Lxny/

Comments

[Grep1]

пробовал

.catalog-menu li:focus-within{
	display: flex;
}

не работает
Пробовал .catalog-menu li:focus-within a , тоже не работает
Мб я не туда назначаю?

[Ankhena]

Grep1, на main-menu-catalog