Drop down menu disappear on submenu

Question

I create my own drop-down menu class, but some bugs is in here. When I drag mouse on sub menu all menu disappear. Here is my mootools code:

    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);
   });
}

And here is my HTML code:

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

All my working code in finddle: http://jsfiddle.net/UBuq5/8/

Where I done mistake?

Answer 1

You can likely achieve this with pure CSS instead. Add the following to your CSS:

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

Remove the JS, and also remove the inline display: none; from .dropDownCol.

Here's an updated fiddle: http://jsfiddle.net/UBuq5/10/

This won't work on touch devices (no hover), but you can simulate it by toggling a hover class on click/tap and updating the CSS accordingly.