html - 样式选项卡选择的元素？

Question

我有一个菜单栏，其中包含我使用 CSS 创建的下拉子菜单。当我使用鼠标时一切正常，但如果我使用 Tab 键选择菜单项，则子菜单将不会打开并且我无法在不使用鼠标的情况下转到任何子页面。

有没有不用JS的情况下用tab键打开子菜单的方法？

这是一个 JS Fiddle

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;
}

Answer 1

当使用 Tab 键时，focus 会转到 anchor 元素，而不是 span。更新 CSS 规则以使用 a 选择器，您将获得

#main_menu > span:hover > span,
#main_menu > a:focus + span > span,
#main_menu > span > span:hover,
#main_menu > span > a:focus + span{
    display: block;
    padding-top: 1em;
    position: absolute;
    z-index: 1000;
}

这是 JSFiddle .