Unable to get CSS transitions to work with drop-down menu

faccarzi

New Member
To understand my situation better, please head over to this pen and take a look. The preview pane of the pen (below the code pane, as shown in screenshot below) shows a preview of the menu I am building.
vypUJ.png
When you click on the menu 'Channels" the menu simply shows up without any transition effect. I have no idea why.This is the relevant code:\[code\].dropdown-menu { position: absolute; top: 36px; left: 0px; z-index: 1000; display: none; width: 550px; padding: 0; margin: 0; list-style: none; background-color: #ffffff; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.12); color: #222; /* See? */ -webkit-transition: height 0.35s ease; -moz-transition: height 0.35s ease; -o-transition: height 0.35s ease; transition: height 0.35s ease;}\[/code\]Any idea as to what I am doing wrong there?
 
Back
Top