you can add one extra class 'real' like this
$(function(){
$('#menu li a').hover(function(){
$('.current').removeClass('current').addClass("real");
},function(){
$('.real').removeClass('real').addClass("current");
}
);
});
and remove the 'real' class to return to current http://jsfiddle.net/fYq6k/2/
UPDATE
to work with focus
$(function(){
$('.current').addClass("real");
$('#menu li a').hover(function(){
$('.current').removeClass('current');
},function(){
$('.current').removeClass('current');
$('.real').addClass("current");
}
).focus(function(){
$('.current').removeClass('current');
$(this).addClass("current");
}).blur(function(){
$('.current').removeClass("current");
$('.real').addClass("current");
});
});
you need to do the same on the events focus and blur http://jsfiddle.net/fYq6k/5/
fix the bug using focus
to fix the flickering i add one empty div to every "li a" and animate that div instead of the border and padding
HTML
<ul id="menu" class="clearfix">
<li><a class="current" href="#"><div></div>La Agencia</a></li>
<li><a href="#"><div></div>Que Hacemos</a></li>
<li><a href="#"><div></div>Portfolio</a></li>
<li><a href="#"><div></div>Contacto</a></li>
</ul>
CSS
#menu li a div{
height:9px;
background:#7d7c7c;
position:absolute;
top:0px;
left:0px;
width:100%;
transition: all .3s ease;
}
#menu li a.current div{
height: 17px;
background:#e30613;
}