Adding delay and animation to submenu

public/sass/components/_sidemenu.scss

@@ -66,14 +66,33 @@
     &:hover {
     &:hover {
       .dropdown-menu {
       .dropdown-menu {
         display: block;
         display: block;
+        opacity: 0;
         top: 0px;
         top: 0px;
         left: $side-menu-width;
         left: $side-menu-width;
         background-color: $side-menu-bg;
         background-color: $side-menu-bg;
+        animation: dropdown-anim 100ms ease-in-out 150ms forwards;
+        z-index: -9999;
       }
       }
     }
     }
   }
   }
 }
 }
 
 
+@keyframes dropdown-anim {
+  0% {
+    display: none;
+    opacity: 0;
+  }
+  1% {
+    display: block;
+    opacity: 0;
+    transform: translate3d(-5%,0,0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0,0,0)
+  }
+}
+
 .sidemenu-main-link {
 .sidemenu-main-link {
   font-size: 16px;
   font-size: 16px;
 }
 }