css transition property not working on hover

Question

I am trying to apply css transition property when i hover the blocks.But its not working.Here's the code

 .dropdown { position: absolute; display: inline-block; z-index: 1; top: 25px; } .dropbtn { background-color: #4CAF50; color: white; padding: 15px; font-size: 20px; border-radius: 0 5px 5px 0; border: none; transition: 0.4s; } .dropdown-content { display: none; background-color: #4CAF50; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; border-radius: 0 5px 5px 0; } .dropdown:hover { left: 20px; } .dropdown-content a { color: white; padding: 12px 16px; text-decoration: none; display: inline-block; } .dropdown:hover .dropdown-content { display: inline-grid; } 

 <div class="dropdown"> <button class="dropbtn" id="service"> Services </button> <div class="dropdown-content"> <a href="#">Service1</a> <a href="#">Service2</a> </div> </div> 

Is it because of the dropdown I have added or am i missing something?I am new to this field.Any help will be appreciated.

Answer 1

this not possible for display in your code

you can translation for Opacity , width , height , background-color , ...

 .dropdown { position: absolute; display: inline-block; z-index: 1; top: 25px; } .dropbtn { background-color: #4CAF50; color: white; padding: 15px; font-size: 20px; border-radius: 0 5px 5px 0; border: none; } .dropdown-content { display: inline-grid; background-color: #4CAF50; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; border-radius: 0 5px 5px 0; Opacity:0; } .dropdown:hover { left: 20px; } .dropdown-content a { color: white; padding: 12px 16px; text-decoration: none; display: inline-block; } .dropdown:hover .dropdown-content { transition:all 1s ease; Opacity:1; } 

 <div class="dropdown"> <button class="dropbtn" id="service"> Services </button> <div class="dropdown-content"> <a href="#">Service1</a> <a href="#">Service2</a> </div> </div> 

jsfiddle

More information