[jsfiddle](https://jsfiddle.net/xLLvzps2/)

Why `hide()` not working? When I try change `hide()` to `fadeOut()` then it's working. Why?

```js
$(document).ready(function() {
  $(".toggle").hover(function() {
    $(".submenu").hide();
    $(this).find(".submenu").first().show();

    $(".hlavnaKategoria").removeClass("active");
    $(this).addClass("active");
  });

  $(".submenu").mouseleave(function() {
    $(".submenu").hide(); // whi this not work?? Try change it to fadeOut()
  });
});
```

```css
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,600,700&subset=latin,latin-ext);
 html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 11pt;
}
html {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
}
.inline {
  display: inline-block;
  vertical-align: top;
  margin: 0 auto;
}
.hidden {
  display: none;
}
.bold,
.strong {
  font-weight: bold;
}
.padding20 {
  padding: 20px;
}
.padding10 {
  padding: 10px;
}
.header {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  background: #1B6CBF;
  height: 100px;
}
.big {
  font-size: 18pt;
}
.menu {
  position: absolute;
  top: 100px;
  width: 200px;
  left: 0px;
  border-right: 1px solid #323232;
  text-align: right;
}
.menu ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: inherit;
}
.menu ul li.hlavnaKategoria {
  cursor: pointer;
  padding: 10px 20px 10px 10px;
}
.menu ul li.hlavnaKategoria .submenu {
  position: absolute;
  top: 0px;
  left: 201px;
  width: 800px;
  background: #323232;
  display: none;
  text-align: left;
  height: 100%;
  z-index: 100;
}
.submenu-item-box {
  width: 300px;
  text-align: left;
  margin: 10px 5px 5px 10px;
  border-left: 5px solid silver;
}
.submenu-item-box:hover {
  border-left: 5px solid #1B6CBF;
}
.submenu-item-box a {
  text-decoration: underline;
  color: #fff;
}
li.hlavnaKategoria.active {
  background-color: #323232;
  border-right: 0px;
  color: white;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul class="kategorie">
    <li class="hlavnaKategoria toggle" data-submenu="14">
      <a class="">Menu 1</a>
      <div class="submenu" id="sm_14">
        <div class="padding10 inline submenu-item-box">
          <div class="">Submenu 1</div>
        </div>
      </div>
    </li>
    <li class="hlavnaKategoria toggle" data-submenu="35">
      <a class="">Menu 2</a>
      <div class="submenu" id="sm_35">
        <div class="padding10 inline submenu-item-box">
          <div class="">Submenu 1</div>
        </div>
        <div class="padding10 inline submenu-item-box">
          <div class="">Submenu 2</div>
        </div>
      </div>
    </li>
  </ul>
</div>
```