jQuery dropdown menu with hover not working fine

Question

I have created a hover dropdown menu with jQuery. I use .mouseenter , .mouseleave events. But the problem is when I leave the hover button the content area does not hide.

HTML

<button data-drp-hover="mynewid">HOVER</button>
<div class="drp-content" data-drp-content="mynewid">
  <span>Item 1</span>
  <span>Item 1</span>
  <span>Item 1</span>
  <span>Item 1</span>
  <span>Item 1</span>
</div>

CSS

[data-drp-content] {
  display:none;
}
.drp-show[data-drp-content] {
  display: block;
}

JS

$("[data-drp-hover]").mouseenter(function(){
  var root =  $(this);
  var _drp_container = $(this).attr("data-drp-hover");
  var _drp_content = $('[data-drp-content="' + _drp_container + '"]');
  _drp_content.addClass("drp-show"); 
  _drp_content.siblings().removeClass("drp-show");

  $(document).click(function(event){
    _drp_content.removeClass("drp-show"); 
  });

  $(_drp_content).click(function(event){
    event.stopPropagation();
  });

  $(_drp_content).mouseleave(function(){
    var timer = setTimeout(function(){
      _drp_content.removeClass("drp-show");
    }, 1000);

    $(_drp_content).mouseenter(function(){
      clearTimeout(timer);
    });

  });
});

Answer 1

it does hide after a second becuase you have a timer there, remove the timer and it works fine here is a fiddle https://jsfiddle.net/5qn6pdv9/

this is the updated js

$("[data-drp-hover]").mouseenter(function () {
    var root = $(this);
    var _drp_container = $(this).attr("data-drp-hover");
    var _drp_content = $('[data-drp-content="' + _drp_container + '"]');
    _drp_content.addClass("drp-show");
    _drp_content.siblings().removeClass("drp-show");
    $(document).click(function (event) {
        _drp_content.removeClass("drp-show");
    });
    $(_drp_content).click(function (event) {
        event.stopPropagation();
    });
    $(_drp_content).mouseleave(function () {

        _drp_content.removeClass("drp-show");

        $(_drp_content).mouseenter(function () {
            clearTimeout(timer);
        });
    });
});