I have been struggling to make this work. I used BS4 for responsiveness, and my navigation items are aligned to the right in the navbar. Despite trying various methods to position the submenu on the left of the parent menu, I still can't get it to display correctly. The same issue occurs with Sub-submenu dropdowns.
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Style Sheets Attached Here-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/multi-navbar.css">
<!-- Style Sheets End Here-->
</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
<img src="assets/logo.jpg" class="rounded" alt="Logo" style="width:40px;">
<a class="navbar-brand" href="#"> NavBar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse justify-content-end">
<ul class="navbar-nav nav-pills nav-fill">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<!-- Dropdown menus contents -->
</ul>
</div>
</nav>
<!-- Navbar completed Here-->
<!-- JavaScript Loads Here-->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS - multi-navbar.css
.navbar-nav li:hover > ul.dropdown-menu {
display: block;
}
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;left:100%;margin-top:-6px;
}
/* rotate caret on hover */
.dropdown-menu >li > a:hover:after {
text-decoration: underline;
transform: rotate(-90deg);
}
These are the codes I have utilized aside from Bootstrap 4. Any assistance would be greatly appreciated.