javascript - 鼠标悬停在菜单上无法正常工作

Question

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

我像这样通过 JQuery 在我的主 HTML 页面上加载菜单:

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

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

    });
</script>

这是菜单

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

这是演示版demo

你知道我为什么会遇到这样的问题吗？

Answer 1

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

摆脱 top: 57px

的 CSS 规则

.mini-sidebar .sidebar-nav #sidebarnav>li>ul

此外 - 作为 future 的注释，请包含您的相关 CSS。