Liam Joyce

CSS for drop down menu

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:

[snippet id=”42″]


To make the transition look good we can use this code to control the transition:

[snippet id=”43″]


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:

[snippet id=”44″]

Again the prefix is needed for each browser.

To keep all the content within the div use:

[snippet id=”45″]

You can then use other CSS to style the div to give feedback and to look good.