CODEWITHSUNDEEP
cssdrop-down-menumenucss-transitionstransition
user2660470
user2660470

Reputation: 53

Adding a drop down transition to CSS Menu

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.

Upvotes: 0

Views: 2627

Answers (2)

Łukasz Nojek
Łukasz Nojek

Reputation: 1641

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.

Upvotes: 1

Anon
Anon

Reputation: 2874

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

Upvotes: 2

Related Questions