我有一个菜单栏,其中包含我使用CSS创建的下拉子菜单。当我使用鼠标时,一切正常,但如果我使用Tab键选择菜单项,子菜单将无法打开,我无法使用鼠标转到任何子页面。
有没有办法用Tab键打开子菜单而不使用JS?
HTML
<span id="main_menu">
<span>
<a href="#">Page 1</a>
</span>
<span>
<a href="#">Page 2</a>
<span>
<span>
<a href="#-history">Sub Page 1</a>
</span>
<span>
<a href="#">Order Savings</a>
</span>
</span>
</span>
<span>
<a href="#">Page 3</a>
</span>
</span>
CSS
#main_menu{
background: #000;
display: inline-block;
padding: 10px;
}
#main_menu > span{
display: inline-block;
vertical-align: top;
}
#main_menu > span:not(:first-child)::before{
content: "|";
color: #FFF;
font-size: 20px;
font-weight: 700;
margin: 0 6px;
vertical-align: top;
}
#main_menu a{
color: #FFF;
font-size: 20px;
font-weight: 700;
text-decoration: none;
}
#main_menu > span > span{
display: none;
}
#main_menu > span:hover > span,
#main_menu > span:focus > span,
#main_menu > span > span:hover,
#main_menu > span > span:focus{
display: block;
padding-top: 1em;
position: absolute;
z-index: 1000;
}
#main_menu > span > span > span > a{
background: none repeat scroll 0 0 #000;
border: 1px solid #fff;
display: block;
padding: 5px 7px;
}
#main_menu > span > span > span > a:hover,
#main_menu > span > span > span > a:focus{
border-color: #00cc00;
color: #00aa00;
}