Transition problem

[Kaladan]

The code is here: http://codepen.io/joe/full/hsmHb . So the problem is that after i remove the cursor from the hovered dropdown, the background disapears before the text. I know it’s because of the transitions on the a element, but i kind of want to keep those. So, how do i get the background to transition like the text? Or at least how to make the text vanish at the same time as the background?

[danieldatton]

.main-menu ul > li ul {
background: #FA5858;
visibility: hidden;
position: absolute;
left: 0px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}

edited it here for you.

http://codepen.io/danieldatton/pen/CiIsr

Danny D.

[Kaladan]

Thanks Daniel.

[Author]

Posts