<div>
  <ul class="menu">
    <li>menu1</li>
    <li>
      menu2
      <ul class="menuSub">
        <li><a href="#">menu2-1</a></li>
        <li><a href="#">menu2-2</a></li>
      </ul>
    </li>
    <li>
      menu3
      <ul class="menuSub">
        <li><a href="#">menu3-1</a></li>
        <li><a href="#">menu3-2</a></li>
        <li><a href="#">menu3-3</a></li>
      </ul>
    </li>
  </ul>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  $(function() {
    $("ul.menu li").hover(
      function() {
        $(".menuSub:not(:animated)", this).slideDown();
      },
      function() {
        $(".menuSub", this).slideUp();
      }
    );
  });
</script>

.menu {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  color: #fff;
  padding: 0;
}

.menu li {
  position: relative;
  width: 100px;
  margin-left: 1px;
  padding: 5px;
  background: #444444;
}

.menuSub {
  position: absolute;
  margin-left: -6px;
  padding: 0;
  display: none;
}

.menuSub li a {
  padding: 5px;
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: -5px;
  display: block;
  color: #fff;
  text-decoration: none;
}

.menuSub li a:hover {
  background: #FFCA7B;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.