CSS dropdown menu with focusout

Question

I have a simple custom CSS dropdown menu like this. Clicking on the dropdown menu button will toggle the display of the container below it (which is absolute positioned). I am trying to mimic the behavior of the HTML select element in which focusout also hides the menu. What would be the best way to do so? If I add a focusout event handler to the dropdown-content div, clicking on the button itself will cause a double trigger (focus out and toggle).

$('.dropdown-btn').on('click', function (e) {
 $('.dropdown-content').toggleClass('hide');
});

$('.dropdown-btn').focusout(function (e) {
    $('.dropdown-content').addClass('hide');
});

$('a').on('click', function (e) {
    // wont run
    console.log(this);
});

.dropdown-container {
  position: relative;
}
.dropdown-btn {
  width: 70px;
  background: cyan;
  padding: 12px;
}
.dropdown-content {
  position: absolute;
}

.dropdown-content a {
  margin-bottom: 1px;
  background: cyan;
  display: block;
}

.hide {
  display: none;
}

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<div class="dropdown-container">
  <div class="dropdown-btn" tabindex="-1">Dropdown</div>
  <div class="dropdown-content hide">
    <a>Dropdown item 1</a>
    <a>Dropdown item 2</a>
  </div>
</div>

Answer 1

A focusout listener work on form elements only. If you need it to work on divs you can assign a tabindex attribute to the div.

Also removed absolute from dropdown-content and added display: inline-block to dropdown-content and dropdown-container. To remove the outline on focus event did this:

.dropdown-container:focus {
  outline: none;
}

See demo below and jsfiddle:

$('.dropdown-btn').on('click', function(e) {
  $('.dropdown-content').toggleClass('hide');
});

$('.dropdown-container').focusout(function(e) {
  $('.dropdown-content').addClass('hide');
});

.dropdown-container {
  position: relative;
  display: inline-block;
}
.dropdown-container:focus {
  outline: none;
}

.dropdown-btn {
  width: 70px;
  background: cyan;
  padding: 12px;
}

.dropdown-content {
  display: inline-block;
  /*position: absolute;*/
}

.dropdown-content a {
  margin-bottom: 1px;
  background: cyan;
  display: block;
}

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-container" tabindex="-1">
  <div class="dropdown-btn">Dropdown</div>
  <div class="dropdown-content hide">
    <a>Dropdown item 1</a>
    <a>Dropdown item 2</a>
  </div>
</div>