0

ドロップダウン メニューを作成しました。通常どおり、メニュー項目にカーソルを合わせると、項目のドロップダウン選択が表示されます。

ホバー時に表示するために使用したコードは次のとおりです。

#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 -->
4

1 に答える 1

-1

LI 要素で「tabindex」属性を使用してみてください。 

<li class="about" tabindex="1">
     <a href="about_us/">私たちについて</a>
        <ul class="sub">
            <li><a href="">オプション 1</a></li>
        </ul>
</li>
于 2012-08-09T08:05:51.800 に答える