Solve an issue in a pure css dropdown menu

Question

I recently created a pure css drop-down menu using Google tutorials.

I have an issue though:

If I give a small margin to the 2nd level ul, when you hover on the gap between the ul and parent li drop-down fades away.

Is there any way to fix this not involving Javascript?

Refer to the demo here : http://jsfiddle.net/ba76n/2/

Answer 1

use padding-top instead of margin-top since margin is applied outside of the block so when you try to select the sub-menu its come on the margin and the block is changed so the sub-menu disappears

Answer 2

http://jsfiddle.net/ba76n/9/ updated your fiddle...hope it helps :)

( Just removed the margin top from the dropdown li and added a border )

Answer 3

that margin is causing the mouse to drop the "mouseover" state, without it it works fine.

If you switch to padding-top:.5em; it should work as expected. This is because margin is on the outside of block elements while padding is on the inside.

Answer 4

Use padding-top instead of margin-top.

See it working. http://jsfiddle.net/ba76n/5/