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>

获取下拉菜单以显示onfocus？

1 个答案: