Javascript 如何检测鼠标的下一次悬停？

嗨，我正在创建一个菜单，我需要检测鼠标的下一步移动。当前im正在使用

event.relatedTarget

并获取下一个元素的

event.relatedTarget.id

。它一直在工作，直到我不得不在菜单上对我的css进行一些修改，所以我必须摆脱

overflow:hidden和使用
显示：内联块。现在发生的事情是，
事件.relatedTarget
是一个空字符串，除非我快速向下拉鼠标到菜单项。我将发布部分代码，并在JSFIDLE上发布完整内容。有什么想法吗，伙计们


它有很多html，所以有点乱，对不起

<ul id="top_nav">
                <li class="first"><a href="#" id="sections" class="nav-link">sections</a></li>
                <li><a href="#" id="products" class="nav-link">products</a></li>              
                <li>
                    <div id="nav_cart">
                        <div class="gfx-div-cart"></div>
                    </div>  
                </li>                
            </ul>         

        <div id="sub_nav">

            <div id="sub_sections" class="sub-wrapper">
                <div id="got_me_sections" class="top-space">
                    <div id="ind_sections" class="indicator"></div>
                </div>
                <div class="nav-items-wrapper">
                    <div class="nav-items-breadcrumb">
                        <ul class="breadcrumb">
                            <li class="bc first">sections</li>
                            <li class="bc last">&nbsp;</li>
                        </ul>
                    </div>
                    <div class="nav-items">
                        <ul class="nav-items-list">

                                   <li><a href="#" class="nav-item">item.Name</a></li>

                        </ul>
                    </div>
                </div>
            </div>
            </div>








章节





我通过将css添加到
…

我将容器向上移动了一点，使用负
边距顶部：-4px
我不明白你想要什么？我希望在我向下移动鼠标时子菜单项可见，这样我可以检测下一个悬停项，以便确定它是可见还是隐藏。
<ul id="top_nav">
                <li class="first"><a href="#" id="sections" class="nav-link">sections</a></li>
                <li><a href="#" id="products" class="nav-link">products</a></li>              
                <li>
                    <div id="nav_cart">
                        <div class="gfx-div-cart"></div>
                    </div>  
                </li>                
            </ul>         

        <div id="sub_nav">

            <div id="sub_sections" class="sub-wrapper">
                <div id="got_me_sections" class="top-space">
                    <div id="ind_sections" class="indicator"></div>
                </div>
                <div class="nav-items-wrapper">
                    <div class="nav-items-breadcrumb">
                        <ul class="breadcrumb">
                            <li class="bc first">sections</li>
                            <li class="bc last">&nbsp;</li>
                        </ul>
                    </div>
                    <div class="nav-items">
                        <ul class="nav-items-list">

                                   <li><a href="#" class="nav-item">item.Name</a></li>

                        </ul>
                    </div>
                </div>
            </div>
            </div>