[Solved] Dropdown menu transition not working?

[plaedien]

Hi guys/girls,

I’m wondering if somebody can help me. I’m just managed to finally get a pure CSS drop down menu working how I want it, with some basic CSS3 transitions on hover. Unfortunately the one link with the dropdown menu doesn’t appear to work, and I can’t for the life of me figure out why.

Can anyone have a look for me?

Your text to link here…

cheers! Karl

[Paulie_D]

You cannot transition display:none to display:block using CSS.

You could look at a JS/JQ solution.

[Dennis]

Alternatively you could look into using opacity and animating that if you still want to keep it all in CSS.

[Paulie_D]

Indeed, default opacity:0 on the submenu and transition to 1 on hover of the parent.

Won’t do anything for the height though.

[Paulie_D]

@tomasz76 Thanks for that link.

That works great. I put together an example.

http://codepen.io/Paulie-D/pen/55e2c755a20da404090951a63584f4d0

[plaedien]

Thank you all!

I was trying as much as possible to keep the menu purely css (for no other reason than seeing if I could!), so I will try as much as I can to avoid javascript. Thank you Tomasz86 for the link, that was extremely helpful. Having said that, the javascript option is good to know for future projects.

thanks guys :)

[Author]

Posts