responsive css menu > ul height fix

Question

I'm novise in responsive css/html. I try to implement the css-only responsive navigation and I got a problem.

See the code: here

In menu, our services > distribution overlaps the next menu item. adding the overflow:hidden in #dropdown ul li ul fix this problem in firefox, but, in IE and mobile browser it does not work.

Please help me to solve this.

Regards, Andrey

Answer 1

The nested li is inheriting the following styles from its parent;

#dropdown ul li { height:50px;}

You you remove the height, the overlap will be prevented.