Title: Adding css animation on dropdown menu
Last modified: August 31, 2016

---

# Adding css animation on dropdown menu

 *  [edwardgnz](https://wordpress.org/support/users/edwardgnz/)
 * (@edwardgnz)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/adding-css-animation-on-dropdown-menu/)
 * Hi, is it possible to add animation to the main nav using the code below?
    Been
   trying to do it but I can’t seem to figure out how to target the menus. Thanks!
 *     ```
       li:hover > ul{
           display:block;
           -moz-animation: fadeIn .3s ease-in ;
           -webkit-animation: fadeIn .3s ease-in ;
           animation:fadeIn  .3s ease-in ;
   
       }
   
       ul li:hover > ul{
           display:block;
           -moz-animation: fadeIn .3s ease-in ;
           -webkit-animation: fadeIn .3s ease-in ;
           animation: fadeIn .3s ease-in;
       }
       ```
   
 * I can’t put a link because I am editing the site with a localhost.

Viewing 1 replies (of 1 total)

 *  [ashish_shrestha](https://wordpress.org/support/users/ashish_shrestha/)
 * (@ashish_shrestha)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/adding-css-animation-on-dropdown-menu/#post-7420864)
 * Assuming that you’re trying to add animation to **child ul** of on mouse hover
   over **parent li** of it, you can try following code. In this demo, when you 
   over over **li**, **child ul of li** get fadeIn slowly. Please customize it according
   to your requirements. Like you can change time 0.5s to as you want.
 *     ```
       @keyframes fadeIn {
       	0%   { opacity: 0; }
       	100%   { opacity: 1; }
       }
   
       ul ul {
       	opacity: 0;
       	display: none;
       	animation: fadeIn 0.5s;
       }
   
       ul li:hover > ul{
       	  display: block;
       	  opacity: 1;
       }
       ```
   

Viewing 1 replies (of 1 total)

The topic ‘Adding css animation on dropdown menu’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/llorix-one-lite/0.2.17/screenshot.
   png)
 * Llorix One Lite
 * [Support Threads](https://wordpress.org/support/theme/llorix-one-lite/)
 * [Active Topics](https://wordpress.org/support/theme/llorix-one-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/llorix-one-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/llorix-one-lite/reviews/)

## Tags

 * [css animation](https://wordpress.org/support/topic-tag/css-animation/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)

 * 1 reply
 * 2 participants
 * Last reply from: [ashish_shrestha](https://wordpress.org/support/users/ashish_shrestha/)
 * Last activity: [9 years, 11 months ago](https://wordpress.org/support/topic/adding-css-animation-on-dropdown-menu/#post-7420864)
 * Status: not resolved