Question

我知道此问题之前已经以其他方式得到了解答，但我不知道如何实现它。我一直在尝试修改一个响应迅速且适合移动设备的demo_menu。 demo子菜单中没有子菜单，所以我尝试制作一个子菜单，但现在我有了这个悬停问题。

这是my示例。

<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，所以我可能会在这里。

任何帮助都是值得赞赏的。

Answer 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

当鼠标悬停在主菜单上时，所有子菜单都会显示

1 个答案: