Perfect auto drop for downdown menu.

scss/bootstrap/_navbar.scss

@@ -11,48 +11,28 @@
   }
 
   // Make dropdown menus auto drop
-  .dropdown {
-    .dropdown-menu {
-      // z-index: 10000;
-      display: none;
-      opacity: 0;
-      pointer-events: none;
-      // transition: all .15s linear;
-      // animation: disappear 0.15s linear;
-    }
-
-    &:hover {
+  @include media-breakpoint-up(md) {
+    .dropdown {
       .dropdown-menu {
-        pointer-events: auto;
-        display: block;
-        opacity: 1;
-        // transition: all .15s linear;
-        animation: appear 0.15s linear;
-      }
-    }
-
-    @keyframes appear {
-      0% {
         display: block;
         opacity: 0;
+        transition: all .15s linear;
+        pointer-events: none; // Prevent auto show when mouse is below top menu item
+        min-width: 170px;
       }
-      100% {
-        display: block;
-        opacity: 1;
+
+      &:hover {
+        .dropdown-menu {
+          display: block;
+          opacity: 1;
+          pointer-events: auto; // Prevent auto hide when mouse is in dropdown menu
+        }
+      }
+
+      .dropdown-menu-end {
+        right: 0;
+        left: auto;
       }
     }
-
-    /*@keyframes disappear {
-      0% {
-        opacity: 1;
-        display: block;
-        transform: scale(1);
-      }
-      100% {
-        opacity: 0;
-        display: none;
-        transform: scale(0);
-      }
-    }*/
   }
 }