css and animation problem on mouseenter

My code is quite long but I have commented o开发者_如何学运维n my jQuery script. My problem is when you mouse over the menu items it animates but it pushes to much ever so slightly three or so pixels to the right. I've been playing around with it for ages and i can't get it quite perfect, it will take a little bit of time to go through it but if you can solve my problem it would be much appreciated. here the the link on jsFiddle http://jsfiddle.net/g6tAn/

It is happening because of the <table> layout. The browser can and will squeeze <td> elements when it does not have enough page width to render the table at its natural width. You can see that the small bouncing effect you are seeing is vastly amplified in a very narrow browser window.

I made a demo with a completely different layout. It works in Chrome12 but I was not really aware of the problems other browsers have with list-style-image so it's a bit broken in other browsers. You could just remove that CSS for a better cross-browser demo.

Or you could just add style="width:600px" to your <table> which fixes the problem (unless you need a dynamic width table of course…)