<div id="wrap">
	<div id="global-nav">
		<ul id="global-nav-btn">
			<li><a href="#">Home</a></li>
			<li>
				<a href="#">Navi01</a>
				<ul>
					<li><a href="#">Navi01 A</a></li>
					<li><a href="#">Navi01 B</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Navi02</a>
				<ul>
					<li><a href="#">Navi02 A</a></li>
					<li><a href="#">Navi02 B</a></li>
					<li><a href="#">Navi02 C</a></li>
					<li><a href="#">Navi02 D</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Navi03</a>
				<ul>
					<li><a href="#">Navi03 A</a></li>
					<li><a href="#">Navi03 B</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>
* {
  margin: 0;
  padding: 0;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font-family: Helvetica, Arial, sans-serif;
  background: #eee;
}
/* clearfix */
ul#global-nav-btn:before,
ul#global-nav-btn:after {
  content:"";
  display:table;
}
ul#global-nav-btn:after {
  clear:both;
}
ul#global-nav-btn {
  zoom:1;
}


#global-nav {
  font-size: 13px;
  background: #333;
  color: #fff;
  width: 100%;

}
#global-nav ul {
  list-style: none;
}
ul#global-nav-btn {
  margin: 0 auto;
  padding: 0;
  color: #fff;
  width: 100%;
}
ul#global-nav-btn a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px;
}
ul#global-nav-btn a:hover {
  background: #434343;
}
ul#global-nav-btn>li {
  float: left;
  position: relative;
  margin: 0;
  width: 130px;
  display: block;
  cursor: pointer;
}
ul#global-nav-btn>li>a {
  padding: 15px 10px;
}
ul#global-nav-btn>li>ul {
  position: absolute;
  padding: 0;
  top: -300px;
  z-index: -1;
}
ul#global-nav-btn>li>ul>li a {
  display: block;
  color: #fff;
  background-color: #333;
  width: 130px;
}
var $gnav = $('#global-nav-btn>li');
var navHeight = [];
$gnav.each(function(){
  navHeight.push($('ul', this).height());
});

// 高さを取得
for (var i=0; i<navHeight.length; i++) {
  if(navHeight[i]) {
    $gnav.eq(i).find('ul').css({
      'top': -navHeight[i] + 'px'
    });
  }
}

$gnav.hover(
  function(){
    var index = $(this).index();
    if(navHeight[index]) {
      dynamics.animate($('ul', this)[0], {
        top: 45
      }, {
        type: dynamics.gravity,
        duration: 800,
        elasticity: 200
      });
    }
  }, function() {
    var index = $(this).index();
    if(navHeight[index]) {
      dynamics.animate($('ul', this)[0], {
        top: -navHeight[index]
      }, {
        type: dynamics.linear,
        duration: 300
      });
    }
  }
);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/dynamics.js/1.0.0/dynamics.min.js