Can Multi-Line Horizontal Top Menu Display Reliably?

I use a horizontal top-menu, and I have 23 items (product categories) which makes the top menu came into two lines.



I found that if I put the mouse over one of the items in the first line, the second line started to be displayed weird. The items all shifted to the right and leave a big blank space on the left of the second line. (see screen shot attached “menu_not_ok.jpg”).



This only happens when the screen is zoomed to a smaller size (i.e. in Windows press the ctrl key and scroll down the middle mouse wheel). If the screen is zoomed to a larger size there's no problem.



Also the problem only happens when the mouse is stopped over one of the items on first line.



The problem happens in Firefox, I also reproduced it in Chrome.



Is there any way to make the items display reliably?

menu_ok.JPG

menu_not_ok.JPG