As I posted earlier, there are 2 things going on. The normal mobile menu behavior of 2012 AND the fact that you align the
li a with pixel, this causes the 2 tiers problem in screen lower than certain width (specifically, lower than 960px, that you designed it on).
To fix the first issue is to take off the below 600px small menu mechanism, the code above is taking of the JS and still there are some CSS works to be done, mostly inside the menu containters, and it's a lot because the way 2012 is designed. You have to understand the html structure of menu and the media queries that go with it.
The second issue could be fixed by assign the width as percentage and center align the text inside the
liinstead, and use media quiery to make text smaller in small screen. Still you can't fit 5 menu items with that wordings into 320px width.