Adding a drop down transition to CSS Menu

Question

I would like to add a -webkit-transition: all 1s ease; or something similar, to my CSS drop down menu however I can not for the life of me figure out where to place it so that it works correctly. I have placed it once, directly within the styling for the first .nav rule where the mega drop down beings.

.nav > li > div {
position: absolute;
left: 0;
top: 43px;
display: none;
-webkit-transition: all 1s ease;
background: #fff;
padding: 20px 20px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
 }

but it is not working.

If anyone could also advise me as to if I have placed the z index in the right place in the css. I have placed it as

 #sidebar{
 position:relative;
 z-index:-1;
 }

Directly after the Drop down menu begins and after the position styling. Is this the correct place to put it?

I need it to stop my images showing in front of the drop down list from the menu but haven't been able to test it yet as my file host (google) is not currently letting me access the share link.

Here is the code: http://cdpn.io/lznko

Any tested examples and solutions are very welcome.

There is no CSS transition between `display:none` and `display:block`. You would have to hide/show the menu in a different way for CSS transitions to apply. — robooneus, Aug 14 '13 at 14:00
Possible duplicate of this: http://stackoverflow.com/questions/4178567/webkit-transition-with-display — AdityaSaxena, Aug 14 '13 at 14:01
Thank you Robooneus. I think you are right because I tired Anons response but it didn't work. The issue is I'm not sure how to hide and show the menu a different way without messing up the rest of the elements. I'm still very new to all this lol. I can of course use a different tutorial but I thought it would be nice to learn how to edit this 100%. Thank you Aditya that post is strictly about transition I was hoping to also get help about where to place the z-index to stop images coming to the front of the menu. — user2660470, Aug 14 '13 at 15:48

score 2 · Answer 1 · answered Aug 14 '13 at 14:18

.nav > li > div{
    height: 0;
    overflow: hidden;
    -webkit-transition: height 200ms linear;
    -moz-transition: height 200ms linear;
    -ms-transition: height 200ms linear;
    -o-transition: height 200ms linear;
    transition: height 200ms linear;
}
.nav > li:hover > div{height: 200px;}

score 1 · Answer 2 · answered Jul 10 '19 at 21:59

Try adding the following styles:

.nav > li > div{
  display: block;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: 300ms;
}
.nav > li:hover > div{
  height: 100px;
  opacity: 1;
}

General rule: avoid hiding an element that should be animated. Use opacity and/or height instead.

Adding a drop down transition to CSS Menu

2 Answers2