JSFiddle - React, Tailwind, and code Playground
HTML
<section class="MenuHead">
<nav class="CorpoMenuHead">
<a href="{$Directory}">Home</a>
<a href="{$Directory}Empresa">A Empresa</a>
<a href="{$Directory}Servicos">Serviços</a>
<a href="{$Directory}Unidades">Unidades</a>
<a href="{$Directory}Clientes">Clientes</a>
<a href="{$Directory}Rastreamento">Rastreamento</a>
<a href="{$Directory}Contato">Contato</a>
</nav>
<div class="CorpoMarcador">
<div class="MarcadorMenu" style="width: 66px; height: 5px; left: 35px;"></div>
</div>
</section>
CSS
.MenuHead {width: 100%; height: 55px; background: blue;}
.CorpoMenuHead{width: 987px; height: 50px; margin: auto;}
.CorpoMenuHead a{height: 50px; line-height: 50px; display: block; float: left; margin: 0 10px; padding: 0 30px; font-family: 'roboto_condensedregular',sans-serif; font-size: 15px; color: #FFFFFF;}
.CorpoMarcador {width: 1000px; height: 5px; margin: auto; position: relative;}
.MarcadorMenu {position: absolute; background: #FFBF00;}
JavaScript
$(document).ready(function(){
var Status = 1;
var LeftInicial = $('.MarcadorMenu').css('left');
var WidthInicial = $('.MarcadorMenu').css('width');
$('.CorpoMenuHead').hover(function(){
$('.CorpoMenuHead').on('mousemove', function(e){
var Tam1 = $('.MenuHead').innerWidth();
var Tam2 = $('.CorpoMenuHead').innerWidth();
if(Status==1){
$('.MarcadorMenu').stop().animate({
left: e.pageX -(Tam1-Tam2)/2-50,
width: '100px'
});
Status=0;
}else{
$('.MarcadorMenu').css({
left: e.pageX -(Tam1-Tam2)/2-50,
width: '100px'
});
}
});
},function(){
$('.MarcadorMenu').animate({
left: LeftInicial,
width: WidthInicial
});
Status=1;
});
});