Как остановить скрытие блока при mouseover/out?

Помогите доработать задумку. На странице есть кнопка или ссылка с ID, при наведении на которую рядом с ней появляется блок в котором я создаю dom элементы. Проблема в том что у меня не получается сделать так чтобы после появления блока и переводе мышки в блок, он оставался видимым.

Вот пример того что сейчас имеется https://jsfiddle.net/gh8thfxb/

(function(){
    var hoverDropdownBoxs = [];
    var hoverDropdownBox = function( o, options ){
    this.parentDOM = document.querySelector('body'); // parent object
    this.triggerDOM = o; // Hover triger object (such as button) for Hover mode
    this.options = options;
    this.dom = null;
    this.items = [];
    this.footerItem = null;
    this.id = hoverDropdownBoxs.length;
    this.init();
    hoverDropdownBoxs.push(this);
    this.appendToParent();
  };
  hoverDropdownBox.prototype.init = function( opt_container ) {
    var container;
    if( ! opt_container) {
        container = document.createElement('div');
      container.className = 'hover_dropdown_box hover_dropdown_box_hover hover_dropdown_box_hide';
      container.dataset.hoverDropdownBoxId = this.id;
      this.dom = container;
      this.parentDOM.appendChild(container);
    } else {
        container = opt_container;
      this.dom = container;
    }
    container.style.width = this.options.width + 'px';
    container.style.height = this.options.height + 'px';
    container.style.display = 'none';
  };
  hoverDropdownBox.prototype.appendToParent = function( ){
        var options = this.options;
        this.triggerDOM[this.id].dataset.hoverDropdownBoxId = this.id;
    this.triggerDOM[this.id].addEventListener('mouseover', this.hover.bind(null, this, this.triggerDOM[this.id]));
    this.triggerDOM[this.id].addEventListener('mouseout', this.unhover.bind(null, this, this.triggerDOM[this.id]));
    };
  hoverDropdownBox.prototype.hover = function(o, h, e) {
    var id = h.dataset.hoverDropdownBoxId;
    var dom = hoverDropdownBoxs[id].dom;
    var parentDOM = hoverDropdownBoxs[id].parentDOM;
    var triggerDOM = hoverDropdownBoxs[id].triggerDOM;
    dom.style.top = '50px';
    dom.style.display = 'block';
    dom.classList.remove('hover_dropdown_box_hide');
  };
  hoverDropdownBox.prototype.unhover = function(o, h, e) {
    var id = h.dataset.hoverDropdownBoxId;
    var dom = hoverDropdownBoxs[id].dom;
    dom.classList.add('hover_dropdown_box_hide');
    dom.style.display = 'none';
    };

  appendHoverDropdownBox = function(e){
        var o = document.querySelectorAll('#' + e.id), s = new hoverDropdownBox( o, e );
    };
})();


appendHoverDropdownBox({
    id: 'navi',
  top: 40,
  width: 200,
  items: {}
});

Как сделать так чтобы при наведении на желтый блок мышкой, он не исчезал?