EDIT: JSFIDDLE: http://jsfiddle.net/mHWqX/
What it do:

How can I avoid every LI to follow the same width / padding ? I want something similar to this in a hover:
||||||||||
|||||||||| Regular
||||||||||
||||||||||||||||||||
|||||||||||||||||||| Hover
||||||||||||||||||||
||||||||||
|||||||||| Regular
||||||||||
||||||||||
|||||||||| Regular
||||||||||
||||||||||
|||||||||| Regular
||||||||||
thanks
Updated/working version: http://jsfiddle.net/mHWqX/2/
The solution is pretty simple: set your style on your anchor instead of your li. This will cause all lis to grow in width still, but since the style is on the
a, only the ‘active’ anchor will grow.