Its been a while since i coded a page and thought I might try my hand at a design with a little sprinkling of CSS3 and HTML5… to bring myself up to speed.
While im at it - ive been trying to code these CSS dropdown menu’s from scratch… Ive got the dropdowns working fine…
However, I wanted to try to space the dropdown 10px away from the main navigation bar. Im using a margin on the top of the nested UL however, the space that it creates, means that when you roll off the main nav item that triggers it, causes the menu to retract before you hit it… Obviously because you essentially “roll off” the button…
Its not essential I have this gap - but wanted to see if I could push the boundary as much as i could…
No, you can’t have a gap between the drop menu and the parent, but you could fake it visually. Just one idea that comes to mind is to have padding on the UL instead of margin, and a background image that’s transparent at the top instead of the rgb color values. Not the nicest compromise, but others may have better ideas.
As Ralph suggests the ul must always stay in contact with the trigger element but you can use padding to create space while still maintaining contact.
As you have styling applied to the ul you would need to remove the styling from the ul and apply it to the list elements themselves instead or perhaps nest a div to hold the ul and apply padding to the div.
For modern browers you could use a 10px transparent border on the top of the ul and then set the background-clip to content-box so that the background doesn;t show through.