コード

HTML

<nav>
  <ul class="nav__list">
    <li class="nav__item"><a href="#">btn</a></li>
    <li class="nav__item"><a href="#">btn</a></li>
    <li class="nav__item"><a href="#">btn</a></li>
    <li class="nav__item"><a href="#">btn</a></li>
  </ul>
  <div class="nav-tracer"></div>
</nav>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

CSS

/* base settings */
ul, li {  margin: 0; padding: 0; list-tyle: none;}

nav {
  position: relative;
}
.nav__list {
	padding: 10px;
  background: #fff;
	overflow: hidden;
}
.nav__item {
	display: inline-block;
}
.nav__item a {
	display: block;
	padding: 5px 40px;
  color: #000;
	text-align: center;
  text-decoration: none;
  transition: .3s;
}
.nav__item a:hover {
  color: #c00;
}
.nav-tracer {
	position: absolute;
	bottom: 0;
  width: 100px;
  height: 2px;
	margin-left: 15px;	
  background: #000;
}

JavaScript

$(function() {
	$('.nav__item').hover(
		function(){  
		var left = $(this).position().left;
		$('.nav-tracer').stop().animate({
			marginLeft : parseInt($(this).css('margin-left'))+ left+1 +'px'
		},'fast');
	});
});

まずは、HTMLとCSSで横並びのメニューをレイアウト。これは動きに全く関係ないので、お好みで。重要なのはJavaScript。

.nav__itemにマウスが乗った時に、そのホバー状態の位置を調べて、追随させるバー.nav-tracerをmargin-leftで動かす。