меню доступность - открыть меню на фокус

Question

в моем сайте у меня есть меню и подменю меню

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

Как я могу сохранить меню открытым, если сфокусирован какой-то вспомогательный элемент.

, конечно, я могу сделать это с помощью javascript, но я хочу знать, могу ли я сделать это только с помощью css.

вот пример (попробуйте перейти по ссылкам с «вкладки»)

li.main{ 
 
    
 
    float:left; 
 
    width:200px; 
 
} 
 
li .sub{ 
 
    display:none; 
 
    } 
 
li:hover .sub{ 
 
    display:block 
 
    } 
 

 
li.main:focus .sub{ 
 
    display:block 
 
    }

<ul> 
 
    <li class="main" tabindex="0"> 
 
    First menu 
 
    <div class='sub'> 
 
     <ul> 
 
     <li><a href="#">First Link</a> </li> 
 
     <li><a href="#">Second Link</a> </li> 
 
     </ul> 
 
     </div> 
 
    </li> <li class="main" tabindex="0"> 
 
    Second menu 
 
    <div class='sub'> 
 
     <ul> 
 
     <li><a href="#">Third Link</a> </li> 
 
     <li><a href="#">Forth Link</a> </li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    </ul>

Answer 1

При нынешних возможностях CSS, вы не можете, как это обсуждалось в много вопросов (см., например, accessible css dropdown menu).

Прежде всего, вы не можете использовать «display: none» в таком подходе, потому что доступ к ссылке невозможен, используя следующий ярлык ссылки (клавиша табуляции в большинстве реализаций браузеров).

Решения, работа которых будет подразумевать решения, такие как позиционирование из экрана. Он ограничивает просмотр на экране текущей ссылкой, поскольку в CSS нет селектора parent(), или вы можете использовать трюк, как в приведенном выше потоке (который будет работать в некоторых браузерах и ограничивать ширину выпадающей части).

Но независимо от решения, оно не решит главную проблему: выпадающее меню - не лучший способ достичь доступности.

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

Это всегда что-то трудное в использовании, трудно понять: что делать, если я нажму ссылку на категорию? Открывает ли она главную страницу категории или открывает это подменю?

Если вы действительно хотите, доступное меню, не используйте выпадающее меню