CODEWITHSUNDEEP
css
sdnr1
sdnr1

Reputation: 307

CSS transition isn't working

I am trying to get the submenu in the navigation bar appear with a transition. But this isn't working. The css code I am using is this-

#navigation li ul {
   display: none; 
   width: auto;
   position: absolute;
   margin: 0;
   padding: 0;
   background-color: #F87217;
    -webkit-transition: 0.7s;
    -moz-transition: 0.7s;
    -o-transition: 0.7s;
    transition: 0.7s;   
}

#navigation li:hover ul {
    display: block;
}

How can I get the transition working?

Upvotes: 0

Views: 2239

Answers (2)

Neograph734
Neograph734

Reputation: 1754

When you use display none, the item is not rendered... So you will never be able to hover it. Usging height as Jan Dvorak says might be a better option. But also an item with height 0 can't be hovered.

I'd recommend using transparency. 

#navigation li ul {
opacity: 0;
...
}
#navigation li:hover ul {
    opacity: 1;
}

Upvotes: 1

John Dvorak
John Dvorak

Reputation: 27277

You can't transition display. Try transitioning height or opacity instead:

#navigation li ul {
   display: block; 
   width: auto;
   height: 0;
   opacity: 0; /* optional */
   /* other attributes */
    -webkit-transition: 0.7s;
    -moz-transition: 0.7s;
    -o-transition: 0.7s;
    transition: 0.7s;   
}

#navigation li:hover ul {
    height: auto;
    opacity: 1; /* optional */
}

Upvotes: 2

Related Questions