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
– robooneus, Commented Aug 14, 2013 at 14:00
Possible duplicate of this: stackoverflow.com/questions/4178567/… — AdityaSaxena
– AdityaSaxena, Commented Aug 14, 2013 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
– user2660470, Commented Aug 14, 2013 at 15:48

Anon · Accepted Answer · 2013-08-14 14:18:47Z

2

.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;}

answered Aug 14, 2013 at 14:18

Anon

2,87417 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Łukasz Nojek · Accepted Answer · 2019-07-10 21:59:32Z

1

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.

answered Jul 10, 2019 at 21:59

Łukasz Nojek

1,67114 silver badges17 bronze badges

Collectives™ on Stack Overflow

Adding a drop down transition to CSS Menu

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related