Solved Css + jQuery dropdown submenu overflow

jQuery dropdown submenu

by tjbaezid

HTML

<header class="header">
  <ul class="menu">
    <li><a href="#work">Work</a></li>
    <li><a class="has-children" href="#about">Haschildren</a>
      <ul class="sub-menu">
        <li><a href="#link1">Child 1</a></li>
        <li><a href="#link2">Child 2</a></li>
        <li><a href="#link3">Child 3</a></li>
      </ul>
    </li>
    <li><a href="#careers">Careers</a></li>
  </ul>
</header>

CSS

header {
  background-color: #000;
  padding: 10px 0;
}

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

header ul li {
  display: inline-block;
  position: relative;
}


/* sub navigation */

.menu li ul {
  background-color: #000;
  position: absolute;
  left: 0;
  top: 40px;
  /* make this equal to the line-height of the links (specified below) */
  right: 0;
}

.menu a {
  line-height: 40px;
  padding: 0 12px;
  margin: 0 12px;
}

.menu a {
  color: #fff;
  text-decoration: none;
  display: block;
}

.menu a:hover,
.menu a:focus,
.menu a:active {
  color: #bbb;
}


/* style sub level links */

.sub-menu li a {
  margin: 0 10px;
  padding: 0;
}

.sub-menu li {
  position: relative;
  margin: 0;
  text-align: center;
  display: none;
  /* hide sub with css */
}

JavaScript

$(document).ready(function() {
  $('.has-children').hover(
    function() {
      $(".sub-menu li").slideDown("slow");

    });

  $(".sub-menu").mouseleave(function() {
    $('.sub-menu li').hide();
  });
});