Javascript 鼠标悬停在菜单上不'；我不能正常工作

我使用的是HTML模板，在访问li/ul子菜单列表时遇到了一个问题。 有时，当我点击主菜单时，会显示子菜单列表，但当我试图将鼠标移到子菜单上时，它就会消失……我在Chrome/Firefox/IE上测试了它，结果是一样的

我通过JQuery将菜单加载到我的HTML主页面上，如下所示：

    <script>
    $(document).ready(function() {

        //loading top menu
        $("#menuTop").load("menu_test.html");

    });
</script>

$（文档）.ready（函数（）{
//加载顶部菜单
$（“#menuTop”）.load（“menu#test.html”）；
});

这是菜单

<aside class="left-sidebar">
        <!-- Sidebar scroll-->
        <div class="scroll-sidebar">
            <!-- Sidebar navigation-->
            <nav class="sidebar-nav">
                <ul id="sidebarnav">
                    <li class="nav-devider"></li>
                    <li class="nav-small-cap">Accueil</li>
                    <li> <a class="has-arrow waves-effect waves-dark" href="index.jsp" aria-expanded="false"><i class="mdi mdi-home"></i><span class="hide-menu">Accueil</span></a>
                    </li>
                    <li><a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-home-modern"></i><span class="hide-menu">Menu 1</span></a>
                        <ul aria-expanded="false" class="collapse">
                            <li><a href="#">page1</a></li>
                            <li><a href="#">page2</a></li>
                            <li><a href="#">page3</a></li>                                
                            <li><a href="#">page4</a></li>
                            <li><a href="#">page5</a></li>
                            <li><a href="#">page6</a></li>
                            <li><a href="#">page7</a></li>
                            <li><a href="#">page8</a></li>
                        </ul>
                    </li>
                    <li><a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-bank"></i><span class="hide-menu">Finances </span></a>
                        <ul aria-expanded="false" class="collapse">
                            <li><a href="#">page1</a></li>
                            <li><a href="#">page2</a></li>
                            <li><a href="#">page3</a></li>
                            <li><a href="#">page4</a></li>
                            <li><a href="#">page5</a></li>
                            <li><a href="#">page6</a></li>
                            <li><a href="#">page7</a></li>
                            <li><a href="#">page8</a></li>
                            <li><a href="#">page9</a></li>
                        </ul>
                    </li>
                    <li><a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-cube-unfolded"></i><span class="hide-menu">Configuration </span></a>
                        <ul aria-expanded="false" class="collapse">
                            <li><a href="#">page1</a></li>
                            <li><a href="#">page2</a></li>
                            <li><a href="#">page3</a></li>
                            <li><a href="#">page4</a></li>
                            <li><a href="#">page5</a></li>
                        </ul>
                    </li>
                    <li><a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-forum"></i><span class="hide-menu">Forum</span></a>
                    <li> <a class="has-arrow waves-effect waves-dark" href="mail.jsp" aria-expanded="false"><i class="mdi mdi-email"></i><span class="hide-menu">Messagerie</span></a>
                    </li>
                    <li> <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-settings"></i><span class="hide-menu">Paramètres</span></a>
                        <ul aria-expanded="false" class="collapse">
                            <li><a href="#">page1</a></li>
                            <li><a href="#">page2</a></li>
                            <li><a href="#">page3</a></li>
                            <li><a href="#">page4</a></li>
                        </ul>
                    </li>

                </ul>
            </nav>
            <!-- End Sidebar navigation -->
        </div>
        <!-- End Sidebar scroll-->
    </aside>

这是一个演示版

---

你知道我为什么要面对这样的问题吗？

主菜单链接下方有一个空白。因此，如果您将鼠标向下移动，它将不再在li中“悬停”，子菜单将消失。缩小差距就行了

正如Adjit所指出的，尝试将顶部值更改为：

top: 100%;

---

主菜单链接下方有一个间隙。因此，如果您将鼠标向下移动，它将不再在li中“悬停”，子菜单将消失。缩小差距就行了

正如Adjit所指出的，尝试将顶部值更改为：

top: 100%;

---

这实际上是因为在您悬停的按钮和子菜单之间有一个非常小的空间。因此，当您将鼠标移出主菜单项时，它会完全离开该区域

摆脱的

top:57px

CSS规则

.mini sidebar.sidebar导航#sidebarnav>li>ul

---

另外-作为将来的注意事项，请包括您的相关CSS。

这实际上是因为在您悬停的按钮和子菜单之间有一个非常小的空间。因此，当您将鼠标移出主菜单项时，它会完全离开该区域

摆脱的

top:57px

CSS规则

.mini sidebar.sidebar导航#sidebarnav>li>ul

---

另外-作为将来的注意事项，请包括您的相关CSS。

演示链接已断开。我怀疑该子菜单不是您悬停以使其显示的元素的子菜单。因此，当您将鼠标移出菜单转到子菜单时，它会触发子菜单的隐藏。我如何检查ul子菜单是否不是我的主li菜单的子菜单？我没有看到任何错误，因为您的标记，我会触发父菜单和子菜单上的悬停效果，因此将鼠标移动到子菜单不会中断悬停显示。演示链接已断开。我怀疑子菜单不是您悬停以使其显示的元素的子菜单。因此，当您将鼠标移出菜单转到子菜单时，它会触发子菜单的隐藏。我如何检查ul子菜单是否不是我的主li菜单的子菜单？我看不到任何错误，因为您的标记，我会触发父菜单和子菜单上的悬停效果，所以将鼠标移动到子菜单不会破坏悬停显示。@tiamat很高兴提供帮助！在Chrome开发工具中，您可以右键单击某个元素并强制进入悬停状态，该状态将悬停在菜单上，让您更清楚地看到问题是的，我知道，但我需要提高我对css的知识，以便能够识别此类问题…@tiamat很高兴为您提供帮助！在Chrome开发工具中，你可以右键点击一个元素并强制进入悬停状态，这将使菜单悬停，让你更清楚地看到问题是的，我知道，但我需要提高我对css的知识，以便能够识别此类问题。。。