Выпадающее меню выходит за пределы правой части экрана ⇐ CSS

[Anonymous]

Я пытаюсь создать многоуровневое раскрывающееся меню с помощью Bootstrap. По умолчанию раскрывающиеся списки должны выравниваться по правой стороне, но если места недостаточно, они должны переключиться на выравнивание по левому краю.
Проблема, с которой я столкнулся, заключается в том, что внутренний раскрывающийся список меню иногда выходят за пределы правой части экрана, особенно когда недостаточно места.
Вот соответствующий код:
HTML и CSS:< /p>

Код: Выделить всё

$(document).ready(function() {
$('.nav-item.dropdown').on('mouseenter', function() {
var $dropdownMenu = $(this).find('.dropdown-menu');
var rect = $dropdownMenu[0].getBoundingClientRect();

if (rect.right >  window.innerWidth) {
$dropdownMenu.addClass('dropdown-menu-end');
} else {
$dropdownMenu.removeClass('dropdown-menu-end');
}
});
});

Код: Выделить всё

body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.navbar {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: dimgrey;
width: 100%;
}

.navbar-top {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
}

.navbar-left {
display: flex;
align-items: center;
}

.navbar-brand {
margin-right: 20px;
}

.switch-role-form {
display: flex;
align-items: center;
}

.switch-role {
margin-right: 10px;
}

.welcome-message {
color: blue;
text-align: right;
}

.logout-button {
top: 10px;
right: 10px;
}

.navbar-nav {
display: flex;
justify-content: center;
width: 100%;
background-color: palevioletred;
}

.dropdown-menu li {
position: relative;
}

.dropdown-menu .dropdown-submenu {
display: none;
position: absolute;
left: 100%;
top: -7px;
}

.dropdown-submenu-left {
right: 100%;
left: auto;
}

.dropdown-menu>li:hover>.dropdown-submenu {
display: block;
}

.nav-item:hover>.dropdown-menu {
display: block;
}

.dropdown-submenu:hover>.dropdown-menu {
display: block;
}

.navbar-expand-lg {
width: 100%;
display: flex;
justify-content: center;
}

.dropdown-menu-end {
left: auto;
right: 100%;
}

Код: Выделить всё

Dropdown Menu Alignment

/* Add your CSS here */

[*]






[list]

[url=#]
Menu Item
[/url]


[url=#]Submenu Item »[/url]

[url=#]Submenu Item 1[/url]
[*][url=#]Submenu Item 2[/url]
[/list]

[*][url=#]Another Item[/url]

Подробнее здесь: https://stackoverflow.com/questions/787 ... -of-screen