z-index / border related issue with nav menu

Question

http://jsfiddle.net/FS4zT/

If you visit the above link you see what am describing below. Summary: I have set the z-index of the submenu to 99 and the z-index top level menu to 9.. So basically i was thinking when i move the mouse over to the 1st menu, the 1st submenu will stay in focus when i move the mouse over the items of the submenu.

But for some reason in Firefox 11.0 it switches over to the 2nd Top Level Menu when i try to move my mouse over the 2nd/3rd/4th items of the first sub menu.

In IE 7 : It works as desired by i can still see the border of the 2nd Top Level Menu overlapping the items of the sub-menu even tho their z-index is higher. The border problem can be even seen in firefox.

Can someone shed some light where i might be going wrong?

Answer 1

This should fix it, I hope.

#menu li ul li { 
position: relative;
}