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

另外 - 作为未来的注释，请包含您的相关CSS。

Answer 2

主菜单链接下方有一个间隙。因此，如果您将鼠标向下移动，它就不再“徘徊”了。里面的li和子菜单消失了。缩小差距，它将起作用

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

(lldb) e UIImage* $image = [UIImage imageNamed:"blah.png"]

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

2 个答案: