Created a good looking and easy to use drop down menu using only CSS transitions and divs. This makes use of the CSS3 transitions feature, so not great in IE8 no surprises there.
Here is the CSS for the transition:
To make the transition look good we can use this code to control the transition:
We have to use the prefixes for different browsers.
we can also add a delay to the transition either on close by placing it in the CSS for the div or on open by placing it in :hover. the CSS for the delay is:
Again the prefix is needed for each browser.
To keep all the content within the div use:
You can then use other CSS to style the div to give feedback and to look good.