Dropdownmenu Tabkey pure CSS

Question

Я пытаюсь создать простую dropdownmenu (jFiddle), которая должна быть доступна с помощью клавиши табуляции, даже если javascript отключен.

ul { 
    list-style-type: none; 
} 
#nav > li { 
    display: inline-block; 
    cursor: pointer; 
} 
#nav a { 
    text-decoration: none; 
    color: white; 
    padding: 20px; 
    display: inline-block; 
} 
li { 
    width: 100px; 
    color: white; 
    background-color: #08C; 
} 
ul ul { 
    display: none; 
    position: absolute; 
    padding: 0; 
    margin: 0; 
} 
ul#nav > li:hover > ul { 
    display: block; 
} 

<ul id='nav'> 
    <li><a href='#'>Menu 1</a> 
    <ul> 
     <li><a href='#'>Eintrag 1</a></li> 
     <li><a href='#'>Eintrag 2</a></li> 
    </ul> 
    </li> 
    <li><a href='#'>Menu 2</a> 
    <ul> 
     <li><a href='#'>Eintrag 1</a></li> 
     <li><a href='#'>Eintrag 2</a></li> 
     <li><a href='#'>Eintrag 3</a></li> 
     <li><a href='#'>Eintrag 4</a></li> 
    </ul> 
    </li> 
</ul> 

Можно перебирать записи с вкладкой-ключ с чистым CSS?

Я хотел бы итерацию по ссылкам следующим образом:

Меню 1 -> Eintrag 1 -> Eintrag 2 -> Меню 2 -> Eintrag 1 -> Eintrag 2 -> Eintrag 3 -> Eintrag 4

с кодом CSS

a:focus + ul{ 
    display: block; 
} 

Я могу вкладку на меню 1, а затем Eintrag 1 и Eintrag 2 видны. Нажатие на кнопку снова фокусирует Eintrag 1, а затем ul снова не видно (потому что он получает отображение: нет), поэтому я не могу получить доступ к Eintrag 2. Есть ли простое решение для CSS, как вести вкладку во все записи?

Answer 1

Если вы пишете tabindex="XXXX" в ваших <a> тегов, когда XXXX инкрементное число, то TabIndex будет определять порядок в том, что ваши элементы будут сосредоточены на клавише табуляции.

Итак:

<ul id='nav'> 
    <li><a href='#' tabindex="1">Menu 1</a> 
    <ul> 
     <li><a href='#' tabindex="2">Eintrag 1</a></li> 
     <li><a href='#' tabindex="3">Eintrag 2</a></li> 
    </ul> 
    </li> 
    <li><a href='#' tabindex="4">Menu 2</a> 
    <ul> 
     <li><a href='#' tabindex="5">Eintrag 1</a></li> 
     <li><a href='#' tabindex="6">Eintrag 2</a></li> 
     <li><a href='#' tabindex="7">Eintrag 3</a></li> 
     <li><a href='#' tabindex="8">Eintrag 4</a></li> 
    </ul> 
    </li> 
</ul> 

если вам нужен элемент быть не сфокусирован, установите tabindex="-1" к этому элементу.

Вы должны также изменить свой CSS, устанавливая состояние Hover так же, как состояние фокусировки, чтобы открыть в фокусе:

ul#nav > li:hover > ul 
ul#nav > li:focus > ul { 
    display: block; 
} 

Answer 2

учитывая, что я правильно понял ваше требование, вот мой ответ:

Таблетки в некотором роде работают как кнопки Radio. Вы можете выбрать только один экземпляр. Почему бы вам не связать каждую вкладку с переключателем и проверить текущую вкладку в соответствии с выбранным переключателем.

ul{ 
 
    list-style-type: none; 
 
} 
 

 
#nav > li{ 
 
    display: inline-block; 
 
    cursor: pointer; 
 
} 
 

 
#nav label, #nav a{ 
 
    text-decoration: none; 
 
    color: white; 
 
    padding: 20px; 
 
    display: inline-block; 
 
} 
 

 
li{ 
 
    width: 100px; 
 
    color: white; 
 
    background-color: #08C; 
 
} 
 

 
ul ul{ 
 
    display:none; 
 
    position: absolute; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
ul#nav input.tabset{ 
 
width:0px; 
 
    height:0px; 
 
    padding:0px; 
 
} 
 

 
ul#nav input.tabset:checked ~ ul{ 
 
    display: block; 
 
}

<ul id='nav'> 
 
    <li><input class="tabset" id="menu1" name="tabset1" type="radio" /><label for="menu1" href='#'>Menu 1</label> 
 
    <ul> 
 
     <li><a href='#'>Eintrag 1</a></li> 
 
     <li><a href='#'>Eintrag 2</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><input class="tabset" id="menu2" name="tabset1" type="radio" /><label for="menu2" href='#'>Menu 2</label> 
 
    <ul> 
 
     <li><a href='#'>Eintrag 1</a></li> 
 
     <li><a href='#'>Eintrag 2</a></li> 
 
     <li><a href='#'>Eintrag 3</a></li> 
 
     <li><a href='#'>Eintrag 4</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>