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 回答