hover dropdown

src/html/Navigation.html

@@ -1,4 +1,4 @@
-<nav id="Navigation" class="fixed-top navbar-dark bg-dark navbar navbar-expand-lg">
+<nav id="Navigation" class="fixed-top navbar-dark bg-dark navbar navbar-expand-lg dropdown-hover">
 	<a class="navbar-brand" href="#">UI Kit</a>
 	<button
 	data-target="#NavbarResponsive" aria-controls="NavbarResponsive"

src/js/app.js

@@ -9,7 +9,7 @@ import 'bootstrap/js/dist/carousel';
 import 'bootstrap/js/dist/collapse';
 
 // conflicting with bootstrap-select/dist/js/bootstrap-select
-//import 'bootstrap/js/dist/dropdown';
+import 'bootstrap/js/dist/dropdown';
 
 import 'bootstrap/js/dist/modal';
 import 'bootstrap/js/dist/tooltip';

src/scss/_components/_ui.main.scss

@@ -137,3 +137,70 @@ button, input, optgroup, select, textarea,
 
     @extend .alert-danger;
 }
+
+// dropdown icon
+.dropdown.show .dropdown-toggle::after,
+.dropdown-toggle.active-dropdown::after,
+.dropdown-toggle.active::after {
+    transform: rotate(-90deg);
+}
+
+// dropdown hover
+@media only screen and (min-width: map-get($grid-breakpoints, "md")) {
+    .dropdown-hover .collapse ul li {
+        position: relative;
+    }
+
+    .dropdown-hover .collapse ul li:hover {
+        > .dropdown-toggle::after {
+            transform: rotate(-90deg);
+        }
+
+        > ul {
+            display: block;
+        }
+    }
+
+    .dropdown-hover .collapse ul ul {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        min-width: 250px;
+        display: none;
+    }
+
+    /*******/
+    .dropdown-hover .collapse ul ul li {
+        position: relative;
+    }
+
+    .dropdown-hover .collapse ul ul li:hover > ul {
+        display: block;
+    }
+
+    .dropdown-hover .collapse ul ul ul {
+        position: absolute;
+        top: 0;
+        left: 100%;
+        min-width: 250px;
+        display: none;
+    }
+
+    /*******/
+    .dropdown-hover .collapse ul ul ul li {
+        position: relative;
+    }
+
+    .dropdown-hover .collapse ul ul ul li:hover ul {
+        display: block;
+    }
+
+    .dropdown-hover .collapse ul ul ul ul {
+        position: absolute;
+        top: 0;
+        left: -100%;
+        min-width: 250px;
+        display: none;
+        z-index: 1;
+    }
+}