css - 获取下拉菜单以显示焦点？

Question

我制作了一个下拉菜单，按照惯例，当您将鼠标悬停在菜单项上时，您会得到一个下拉菜单选项。

我用来让它们在悬停时显示的代码是:

#header .navWrapper .nav li:hover > ul.sub {
    display: block;
}

我想知道有没有办法让他们在没有 Javascript 的情况下显示 onfocus？

我试过了，但是没用..

#header .navWrapper .nav li:hover > ul.sub,
#header .navWrapper .nav li:focus > ul.sub
{
    display: block;
}

HTML代码:

    <div class="navWrapper">
        <div class="left"></div>
        <div class="nav">
            <ul>
                <li class="home"><a href="/">Home</a></li>
                <li class="spacer"></li>
                <li class="about">
                    <a href="about_us/">About Us</a>
                    <ul class="sub">
                        <li><a href="">option 1</a></li>
                    </ul>                        
                </li>
                <!-- About Ends -->
                <li class="spacer"></li>
                <li class="trademark"><a href="freetrademarksearch/">Free Trademark Search</a></li>
                <li class="spacer"></li>
                <li class="services">
                    <a href="services/">Services</a>
                    <ul class="sub">
                        <li><a href="">option 1</a></li>
                        <li><a href="">option 2</a></li>
                    </ul>
                    <!-- Sub Ends -->
                </li>
                <!-- Services Ends -->
                <li class="spacer"></li>
                <li class="testimonials"><a href="testimonials/">Testimonials</a></li>
                <li class="spacer"></li>
                <li class="more">
                    <a href="javascript:void(0);">More Information</a>
                    <ul class="sub">
                        <li><a href="">option 1</a></li>
                        <li><a href="">option 2</a></li>
                    </ul>
                    <!-- Sub Ends -->
                </li>
                <li class="spacer"></li>
                <li class="contact"><a href="contact-us/">Contact Us</a></li>                 
            </ul>
            <div class="contentClear"></div>
        </div>
        <!-- Nav Ends -->
        <div class="right"></div>
    </div>
    <!-- Nav Wrapper Ends -->

Answer 1

尝试在 LI 元素上使用“tabindex”属性:

<li class="about" tabindex="1">     <a href="about_us/">About Us</a>        <ul class="sub">            <li><a href="">option 1</a></li>        </ul></li>