Here's a solution with jQuery :
largMenu = 0; //Esta variável vai juntar a largura inicial de cada item do menu em um único valor
$('nav > ul > li').each(function(){
largMenu += $(this).width(); //A largura de cada item é somado
});
$('nav > ul > li').each(function(){
$(this).width((((100 * $(this).width()) / largMenu)) + '%'); //A largura de cada item é dada em porcentagem
});
In this suggested template, we will use nav
of HTML5. will look something like this:
<nav>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2 maior</a></li>
<li><a href="#">Item 1 ainda maior</a></li>
<li><a href="#">Item 1 final</a></li>
</ul>
</nav>
The basic css for this template:
/*Reseta os elementos do menu*/
nav, nav >ul, nav > ul > li {display:block; position:relative; margin:0; padding:0; list style:none;}
nav > ul > li {float:left;}
If for some reason the menu break line, just remove a small percentage of the width of each item in the following snippet: $(this).width((((100 * $(this).width()) / largMenu) - 0.9) + '%'); //A largura de cada item é dada em porcentagem
. - 0.9
is the point in question.
I hope I have helped; D.