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

Question

I'm using a HTML template and I'm facing an issue while accessing the li / ul sub menu list. sometimes, when I click on the main menu, the list of sub menus is displayed but as soon as I'm trying to mouse over on the sub menu, it disapear...I tested it on Chrome/Firefox/IE with the same result.

I'm loading the menu on my main HTML page via JQuery like this:

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

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

    });
</script>

and here is the menu

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

here is a demo version demo

do you know why I'm facing such issue ?

Answer 1

It is actually happening because there is a very small space in between the button you are hovering and the sub-menu. So when you move your mouse out of the main menu item it leaves the area entirely.

Get rid of the top: 57px CSS rule for

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

Also - as a note for the future, please include your relevant CSS.

Answer 2

There is a gap below the main menu link. So if you move your mouse down it is no longer 'hovering' inside the li and the sub menu dissapears. close the gap and it'll work

As pointed out by Adjit, try changing the top value to:

top: 100%;