CSS3兒童菜單未在焦點上顯示

Question

我能夠顯示焦點上的第一個子菜單，但第二個子菜單不顯示。我曾嘗試將css屬性設置爲display: block，並嘗試更改定位，但我明顯錯過了某些內容。

這是作爲一個Sass項目啓動的，我可以通過在CSS中刪除大量多餘的ul li ul li來更容易地找到問題，但我仍然遇到同樣的問題。

我發佈了一個jsfiddle設置，使用了我正在使用的CSS和HTML。任何幫助解決第二個子菜單將不勝感激。

http://jsfiddle.net/nulimitz/uxfposgc/

HTML：

<nav class="nav-main"> 
<div class="logo">Website</div> 
<div class="mobile-nav"> 
    <i class="fa fa-bars"></i> 
</div> 
<ul> 
    <li class="dropdown"> 
    <a href="#" class="nav-item">Link</a> 
    <ul class="dropdown-menu"> 
    <li><a href="#" class="nav-item">Link</a></li> 
    <li><a href="#" class="nav-item">Link</a></li> 
    <li class="dropdown"><a href="#" class="nav-item">Link</a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">HTML</a></li> 
     <li><a href="#">CSS</a></li> 
    </ul> 
    </li> 
    </ul> 
    </li> 
    <li class="dropdown"> 
    <a href="#" class="nav-item">Link</a> 
    <ul class="dropdown-menu"> 
    <li><a href="#" class="nav-item">Link</a></li> 
    <li><a href="#" class="nav-item">Link</a></li> 
    <li><a href="#" class="nav-item">Link</a></li> 
    </ul> 
    </li> 
    <li class="dropdown"> 
    <a href="#" class="nav-item">Link</a> 
    <ul class="dropdown-menu"> 
    <li><a href="#" class="nav-item">Link</a></li> 
    <li><a href="#" class="nav-item">Link</a></li> 
    <li><a href="#" class="nav-item">Link</a></li> 
    </ul> 
    </li> 
</ul> 
</nav> 

CSS：

.nav-main { 
    width: 100%; 
    background-color: #222; 
    height: 70px; 
    color: #fff; 
} 
.nav-main .logo { 
    float: left; 
    height: 40px; 
    padding: 15px 30px; 
    font-size: 1.4em; 
    line-height: 40px; 
} 
.nav-main > ul { 
    position: relative; 
    float: left; 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 
.nav-main > ul > li { 
    float: left; 
} 
.nav-main > ul > li > a { 
    display: inline-block; 
    padding: 15px 20px; 
    height: 40px; 
    line-height: 40px; 
    color: #fff; 
    text-decoration: none; 
} 
.nav-main > ul > li > a:hover { 
    background-color: #444; 
} 
.nav-main > ul > li > a:focus { 
    background-color: #444; 
} 
.nav-main > ul > li > a:focus ~ ul { 
    visibility: visible; 
    opacity: 1; 
    -webkit-transition: all, 25ms, ease-in-out; 
    -moz-transition: all, 25ms, ease-in-out; 
    -ms-transition: all, 25ms, ease-in-out; 
    -o-transition: all, 25ms, ease-in-out; 
    transition: all, 25ms, ease-in-out; 
} 
.nav-main > ul > li > ul { 
    position: absolute; 
    top: 70px; 
    padding: 20px; 
    overflow: hidden; 
    background-color: #222; 
    margin: 0; 
    visibility: hidden; 
    list-style-type: none; 
} 
.nav-main > ul > li > ul > li > a { 
    padding: 15px 20px; 
    height: 40px; 
    line-height: 40px; 
    color: #fff; 
    text-decoration: none; 
} 
.nav-main > ul > li > ul > li > a:hover { 
    background-color: #444; 
} 
.nav-main > ul > li > ul > li > a:focus { 
    background-color: #444; 
} 
.nav-main > ul > li > ul > li > a:focus ~ ul { 
    visibility: visible; 
    opacity: 1; 
    -webkit-transition: all, 25ms, ease-in-out; 
    -moz-transition: all, 25ms, ease-in-out; 
    -ms-transition: all, 25ms, ease-in-out; 
    -o-transition: all, 25ms, ease-in-out; 
    transition: all, 25ms, ease-in-out; 
} 
.nav-main > ul > li > ul > li > ul { 
    position: absolute; 
    left: 100%; 
    top: 0; 
    padding: 20px; 
    overflow: hidden; 
    background-color: #222; 
    margin: 0; 
    visibility: hidden; 
    list-style-type: none; 
} 
.nav-main > ul > li > ul > li > ul > li > a { 
    padding: 15px 20px; 
    height: 40px; 
    line-height: 40px; 
    color: #fff; 
    text-decoration: none; 
} 
.nav-main > ul > li > ul > li > ul > li > a:hover { 
    background-color: #444; 
} 

Answer 1

你的代碼是正確的。它適用於手動對焦，但錨點元素不會對焦點做出反應。

將tabindex添加到您的代碼中。

<a tabindex="1"></a> 
<a tabindex="2"></a> 

這將使錨元素響應焦點。

所以，你的代碼是：

<ul> 
<li> 
    <a tabindex="1"></a> 
</li> 
<li> 
    <a tabindex="2"></a> 
</li> 
    ...and so on 
</ul> 

編輯：你甚至可以通過改變tabindex屬性的順序改變聚焦到錨元素的順序。

對於例如：

<a tabindex="2"></a> 
<a tabindex="1"></a> 

通過這種方式，第二錨固元件將首先集中在按壓標籤然後將第一錨元件。

Answer 2

其實你有3個問題在這裏：

1）你不能有一個第二個下拉：焦點，因爲你只有在時間重點項目1項，因此，當你專注於第二（點擊），你將失去第一個重點，一切都將結束。 也溢出：隱藏將隱藏這第二級ul。

2）是否可以使用此選項，使用標籤鍵盤導航時會遇到問題。

3）你有每個元素的具體類，使用它並在你的CSS中重用，以獲得最佳性能建議。

歸檔此，我建議你用js（或jQuery的），或在LI元素徘徊過，或多或少是這樣的：

.nav-main .dropdown:hover > .dropdown-menu, 
.nav-main .dropdown a:focus + .dropdown-menu{ 
    visibility: visible; 
    opacity: 1; 
    -webkit-transition: all, 25ms, ease-in-out; 
    -moz-transition: all, 25ms, ease-in-out; 
    -ms-transition: all, 25ms, ease-in-out; 
    -o-transition: all, 25ms, ease-in-out; 
    transition: all, 25ms, ease-in-out; 
} 

http://jsfiddle.net/uxfposgc/3/

還要檢查這個問題Accessible HTML5/CSS3 dropdown menu without Javascript