0

この質問は以前に他の方法で既に回答されていることは知っていますが、それを実装する方法がわかりません。レスポンシブでモバイル デバイスに適した demo_menu を変更しようとしています。デモにはサブメニュー内にサブメニューがなかったので、作成しようとしましたが、ホバーの問題が発生しました。

これが私の例です。

<div class="container">
<header>
    <!-- start header here-->
    <header>
        <div id="fdw">
            <!--nav-->
            <nav>
                <ul>
                    <li><a href="#">Who we are<span class="arrow"></span></a>

                        <ul style="display: none;"
                        class="sub_menu">
                            <li class="arrow_top"></li>
                            <li><a href="#">Jane</a>

                            </li>
                            <li><a href="#">Joe</a>

                            </li>
                            <li><a href="#">FAQ</a>

                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Our servicese<span class="arrow"></span></a>

                        <ul style="display: none;"
                        class="sub_menu">
                            <li class="arrow_top"></li>
                            <li><a href="#">Classes</a>

                            </li>
                            <li><a href="#">Camping</a>

                            </li>
                            <li><a href="#">Coaching</a>

                            </li>
                            <li><a href="#">Stables</a>

                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Prices</a>

                    </li>
                    <li><a href="#">Gallery<span class="arrow"></span></a>

                        <ul style="display: none;"
                        class="sub_menu">
                            <li class="arrow_top"></li>
                            <li><a href="#">Horses<span class="arrow"></span></a>

                                <ul style="display:none;"
                                class="sub_menu2">
                                    <li><a href="#">Horse A</a>

                                    </li>
                                    <li><a href="#">Horse B</a>

                                    </li>
                                    <li><a href="#">Horse C</a>

                                    </li>
                                    <li><a href="#">etc</a>

                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">Location</a>

                            </li>
                            <li><a href="#">Competition</a>

                            </li>
                            <li><a href="#">Theme days</a>

                            </li>
                        </ul>
                    </li>
                    <li>    <a href="#">Contact<span class="arrow"></span></a>

                        <ul style="display: none;"
                        class="sub_menu">
                            <li class="arrow_top"></li>
                            <li><a href="#">Feedback</a>

                            </li>
                            <li><a href="#">Guestbook</a>

                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
        <!-- end fdw -->
    </header>
    <!-- end header -->


// show and hide sub menu
$(function () {
$('nav ul li').hover(

function () {
    //show its submenu
    $('ul', this).slideDown(150);
},

function () {
    //hide its submenu
    $('ul', this).slideUp(150);
});
});
//end

私のスキルは基本的な html と css だけに制限されているので、ここで頭がいっぱいになるかもしれません。

どんな助けでも大歓迎です。

4

1 に答える 1

1

必要なのはこれだけです：http：//jsfiddle.net/QW8j8/4/

$('nav ul li').hover(

function () {
    //show its submenu
    $('> ul', this).slideDown(150);
}, //--^---------------------------apply to the direct children not grandchildren

function () {
    //hide its submenu
    $('> ul', this).slideUp(150);
});//--^---------------------------apply to the direct children not grandchildren
于 2013-02-06T05:15:28.313 に答える