Question

I’m trying to create a transition effect on a <a> tag within a list, which will make a nested list display. This is fine, except that I want it to coincide with a transition effect on the <a>, which lasts 0.5 sec. Despite trying with transition delays, it always seems to transition straight away. Basically, I want a 0.5 sec delay before the nested list appears.

I also want it so that when a user hovers over an item in the nested list, the <a> element still maintains it’s hover state. Is this possible?

I wanted to try and do as much as possible in pure CSS.

Can anybody give me any guidance? I hope I’ve explained it well enough.

JS Fiddle here: http://jsfiddle.net/WKfuW/1/

Please excuse the weird characters – I’m using @font-face for icons.

Answer 1

http://jsfiddle.net/WKfuW/2/

I was able to achieve the goal you want by, instead of transitioning display, I transition opacity. Display is a toggle — it’s either on or off. But opacity is a range, from 0 to 1. So by using that instead, I was able to delay it, fade it, and do the same in reverse.

The useful CSS is:

.option-list ul li ul
{
    display: block;
    opacity: 0;

    transition:opacity 0.5s ease 0.5s;
}

.option-list ul li:hover ul {
    opacity: 1;

    transition: opacity 0.5s ease 0.5s;
}