Javascript 下拉菜单在子菜单上消失

我创建了自己的下拉菜单类，但这里有一些bug。当我在子菜单上拖动鼠标时，所有菜单都消失了。 以下是我的mootools代码：

    var DynamicMenu = new Class({

    initialize: function(el) {
        this.element = el;
        this.timer = null;

        this.element.addEvents({
            'mouseover': this.enter.bind(this),
            'mouseout': this.leave.bind(this)
        });

    },
    enter: function() {
        var that = this;
        this.timer = setTimeout(function(){
            $$(".top-nav")[0].addClass("index_1001");
            var columns = that.element.getChildren(".dropDownCol")[0];
            var catalog = that.element.getChildren(".dropDownCatalog")[0];
            if (columns != null) {
                columns.show();
            }
            if (catalog != null) {
                var columns2 = that.element.getChildren(".dropDownCatalog ul li .catalogNaviInner")[0];
                if (columns2 != null) {
                    columns2.show();
                }
                catalog.show();
            }
            if(columns != null || catalog != null){
                $$('div.wrapper.tal')[0].adopt(new Element('div', {
                    'class': 'owerlay'
                }));
            }
        },500);
    },
    leave: function() {
        this.stopTimer();
        if($$('.owerlay')[0] != null){
            $$('.owerlay').destroy();
        }
        $$(".top-nav")[0].removeClass("index_1001");
        var columns = this.element.getChildren(".dropDownCol")[0];
        var catalog = this.element.getChildren(".dropDownCatalog")[0];
        if (columns != null) {
            columns.hide();
        }
        if (catalog != null) {
            catalog.hide();
        }
    },
    stopTimer: function() {
        if (this.timer != null) {
            clearTimeout(this.timer);
            this.timer = null;
        }
    }
});

if ($$(".top-nav > li")[0] != null) {
   Array.each($$('.top-nav > li'), function(element){
      new DynamicMenu(element);
   });
}

这是我的HTML代码：

<ul class="block-list top-nav ">
   <li>
       <a class="topLink" href="/link" title="Menu"><span class="arrowDown">Menu Menu</span></a>
      <div class="dropDownCol" style="width: 190px; z-index: 1001; display: none;">
         <div class="fl column">
            <ul>
               <li class="groupHeading "><a href="/link">Menu 1</a></li>
            </ul>
            <ul>
               <li class="groupHeading "><a href="/link">Menu 2</a></li>
            </ul>
            <ul>
               <li class="groupHeading "><a href="/link">Menu 3</a></li>
            </ul>
            <ul>
               <li class="groupHeading "><a href="/link">Menu 4</a></li>
            </ul>
         </div>
         <div class="clear"></div>
      </div>
   </li>
</ul>

finddle中的所有工作代码：

---

我在哪里犯了错误？

你可以用纯CSS来代替。将以下内容添加到CSS中：

.dropDownCol {
  display: none;
}
.top-nav > li:hover .dropDownCol {
  display: block;
}

删除JS，同时删除内联

display:none来自
.dropDownCol

这是最新的提琴：

这在触摸设备（无悬停）上不起作用，但您可以通过在单击/点击时切换
悬停
类并相应地更新CSS来模拟它。
但对我来说，需要0.5s的显示延迟。我想您可以使它更简单，如@Sergio，thx其他用于菜单目的的代码，但“mouseenter”和“mouseleave”事件帮助我解决了这个问题。