0
我需要一些幫助,試圖解決我的導航問題。我可以通過導航來顯示下拉菜單,當列表項使用標籤按鈕進入焦點時,但我無法獲得標籤來遍歷下拉菜單(子菜單),它只是標籤到下一個列表項標籤。鍵盤無法通過子菜單迭代下拉菜單
我已經嘗試jQuery沒有運氣,現在我只是想使用html,css和tabindex,但仍然沒有運氣。
HTML
<nav aria-label="Main menu" id="globalNav" >
<ul>
<li class="dropdown" tabindex="0" ><a href="#"><span itemprop="name">Welcome</span></a>
<ul class="sub-menu">
<li role="menuitem"><a href="#">Visitor</a></li>
<li role="menuitem"><a href="#">Aid</a></li>
<li role="menuitem"><a href="#">Payments</a></li>
</ul>
</li>
<li class="dropdown" tabindex="0"><a href="#"><span itemprop="name">Sports</span></a>
<ul class="sub-menu">
<li role="menuitem"><a href="#">Basketball</a></li>
<li role="menuitem"><a href="#">Football</a></li>
<li role="menuitem"><a href="#">Soccer</a></li>
</ul>
</li>
</ul>
</nav>
CSS
#globalNav {
width: 100%;
border-bottom: 3px solid rgba(74, 61, 48, 0.3);
padding: 0.54rem 0;
margin-top: 30px;
z-index: 10;
}
#globalNav ul {
list-style: none;
display: table;
margin: 0 auto;
font-size: 1rem;
text-transform: uppercase;
}
#globalNav ul li.dropdown {
display: table-cell;
padding: 0 10px;
border-left: 1px solid #EEE;
text-align: center;
}
#globalNav ul li.dropdown a{
color: #4A3D30;
display: inline-block;
position: relative;
}
#globalNav ul li.dropdown a:hover,
#globalNav ul li.dropdown a:focus,
#globalNav ul li.dropdown a:active{
color:#666;
}
#globalNav ul li.dropdown a.active:after{
width: 100%;
background: #990000;
}
#globalNav ul li.dropdown a:after{
content: "";
display: block;
margin: auto;
height: 2px;
width: 0;
background-color: transparent;
}
/*Children GlobalNav*/
#globalNav ul li.dropdown a ul.sub-menu {
}
#globalNav ul li.dropdown ul.sub-menu {
position: absolute;
display: none;
z-index: 100;
text-transform: none;
min-width: 256px;
max-width: 256px;
}
#globalNav ul li.dropdown:hover ul.sub-menu,
#globalNav ul li.dropdown:focus ul.sub-menu,
#globalNav ul li.dropdown:active ul.sub-menu{
display: block;
background-color: #dcd8d6;
color: #4a3d30;
}
#globalNav ul li.dropdown ul.sub-menu:hover,
#globalNav ul li.dropdown ul.sub-menu:focus,
#globalNav ul li.dropdown ul.sub-menu:active {
background-color: #3f79c1;
}
#globalNav ul li.dropdown ul.sub-menu li a {
padding: 8px;
}
這裏是我的codepen http://codepen.io/nicban/pen/vmEEPr
我覺得我失去了一些東西明顯
太好了。你的例子爲我工作。非常感謝! – nicban