/*
|--------------------------------------------------------------------------
| Multi-Level Dropdown on Hover
|--------------------------------------------------------------------------
|
| This CSS adds hover functionality for dropdowns without breaking the
| default Bootstrap navbar styling.
|
*/

/* Show the first-level submenu on hover */
.navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
}

/* Show the sub-submenu on hover */
.dropdown-menu .dropdown.dropend:hover > .dropdown-menu {
    display: block;
}

/*
  This ensures the sub-submenu (level 3) appears to the right of its parent.
  Bootstrap's .dropend class handles most of this, but this ensures it.
*/
.dropdown-menu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px; /* Aligns the arrow nicely */
}