样式选项卡选择的元素？

Question

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

有没有办法用Tab键打开子菜单而不使用JS？

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