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/">关于我们</a>
        <ul class="sub">
            <li><a href="">选项 1</a></li>
        </ul>
</li>