Question

I want to create this menu where on hover a dropdown menu appears and normally I would have no trouble doing this setting the UL to top:100%. However this time I need it to be further down but it needs to be precised so it is cross browser friendly. So what I tried is to set a margin-top:17px to the UL container to push it away from the top and that works but as soon as I hover over it, the dropdown closes. I added a RED border in the example to show where I would like the dropdown UL top to start.

Please have a look -> Link to example

Answer 1

Try to change margin-top to padding-top – http://jsfiddle.net/BZpLf/2/

#main-nav ul ul {display:none;position:absolute;top:100%;left:0;padding-top:17px;min-width:150px;background-color:#272727;opacity:0.8;filter:alpha(opacity=80);}

Also the background-color is changed from #000 to #272727