Estou tentando fazer um menu com vários níveis e os menus que ficam mais a direita estão estourando na tela do notebook. Alguém sabe o que eu posso fazer para que o menu se ele for estourar ele abra para o outro lado?
Fiz um exemplo de meu que está estourando : https://codepen.io/elalima87/pen/KKZKGMN
Desde já agradeço.
.dropdown-menu li{
position: relative;
}
.dropdown-menu .submenu{
display: none;
position: absolute;
left:100%; top:-7px;
}
.dropdown-menu .submenu-left{
right:100%; left:auto;
}
.dropdown-menu > li:hover{ background-color: #f1f1f1 }
.dropdown-menu > li:hover > .submenu{
display: block;
}
}
/* ============ desktop view .end// ============ */
/* ============ small devices ============ */
@media (max-width: 991px) {
.dropdown-menu .dropdown-menu{
margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<!-- ============= COMPONENT ============== -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home </a> </li>
<li class="nav-item"><a class="nav-link" href="#"> About </a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Treeview menu </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 2 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu item 1</a></li>
<li><a class="dropdown-item" href="#">Submenu item 2</a></li>
<li><a class="dropdown-item" href="#">Submenu item 3 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Multi level 1</a></li>
<li><a class="dropdown-item" href="#">Multi level 2</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Submenu item 4</a></li>
<li><a class="dropdown-item" href="#">Submenu item 5</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 3 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 4 </a>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> More items </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 2 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu item 1</a></li>
<li><a class="dropdown-item" href="#">Submenu item 2</a></li>
<li><a class="dropdown-item" href="#">Submenu item 3</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 3 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Another submenu 1</a></li>
<li><a class="dropdown-item" href="#">Another submenu 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu 3</a></li>
<li><a class="dropdown-item" href="#">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 4 »</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Another submenu 1</a></li>
<li><a class="dropdown-item" href="#">Another submenu 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu 3</a></li>
<li><a class="dropdown-item" href="#">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 5 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 6 </a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> More items </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 2 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu item 1</a></li>
<li><a class="dropdown-item" href="#">Submenu item 2</a></li>
<li><a class="dropdown-item" href="#">Submenu item 3</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 3 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Another submenu 1</a></li>
<li><a class="dropdown-item" href="#">Another submenu 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu 3</a></li>
<li><a class="dropdown-item" href="#">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 4 »</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Another submenu 1</a></li>
<li><a class="dropdown-item" href="#">Another submenu 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu 3</a></li>
<li><a class="dropdown-item" href="#">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 5 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 6 </a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> More items </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 2 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu item 1</a></li>
<li><a class="dropdown-item" href="#">Submenu item 2</a></li>
<li><a class="dropdown-item" href="#">Submenu item 3</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 3 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Another submenu 1</a></li>
<li><a class="dropdown-item" href="#">Another submenu 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu 3</a></li>
<li><a class="dropdown-item" href="#">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 4 »</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Another submenu 1</a></li>
<li><a class="dropdown-item" href="#">Another submenu 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu 3</a></li>
<li><a class="dropdown-item" href="#">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 5 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 6 </a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> More items </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 2 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu item 1</a></li>
<li><a class="dropdown-item" href="#">Submenu item 2</a></li>
<li><a class="dropdown-item" href="#">Submenu item 3</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 3 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Another submenu 1</a></li>
<li><a class="dropdown-item" href="#">Another submenu 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu 3</a></li>
<li><a class="dropdown-item" href="#">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 4 »</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Another submenu 1</a></li>
<li><a class="dropdown-item" href="#">Another submenu 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu 3</a></li>
<li><a class="dropdown-item" href="#">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 5 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 6 </a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> More items </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 2 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu item 1</a></li>
<li><a class="dropdown-item" href="#">Submenu item 2</a></li>
<li><a class="dropdown-item" href="#">Submenu item 3</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 3 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Another submenu 1</a></li>
<li><a class="dropdown-item" href="#">Another submenu 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu 3</a></li>
<li><a class="dropdown-item" href="#">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 4 »</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Another submenu 1</a></li>
<li><a class="dropdown-item" href="#">Another submenu 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu 3</a></li>
<li><a class="dropdown-item" href="#">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 5 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 6 </a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> More items </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 2 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu item 1</a></li>
<li><a class="dropdown-item" href="#">Submenu item 2</a></li>
<li><a class="dropdown-item" href="#">Submenu item 3</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 3 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Another submenu 1</a></li>
<li><a class="dropdown-item" href="#">Another submenu 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu 3</a></li>
<li><a class="dropdown-item" href="#">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 4 »</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Another submenu 1</a></li>
<li><a class="dropdown-item" href="#">Another submenu 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu 3</a></li>
<li><a class="dropdown-item" href="#">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 5 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 6 </a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> More items </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 2 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu item 1</a></li>
<li><a class="dropdown-item" href="#">Submenu item 2</a></li>
<li><a class="dropdown-item" href="#">Submenu item 3</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 3 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Another submenu 1</a></li>
<li><a class="dropdown-item" href="#">Another submenu 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu 3</a></li>
<li><a class="dropdown-item" href="#">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 4 »</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Another submenu 1</a></li>
<li><a class="dropdown-item" href="#">Another submenu 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu 3</a></li>
<li><a class="dropdown-item" href="#">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 5 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 6 </a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> More items </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 2 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu item 1</a></li>
<li><a class="dropdown-item" href="#">Submenu item 2</a></li>
<li><a class="dropdown-item" href="#">Submenu item 3</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 3 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Another submenu 1</a></li>
<li><a class="dropdown-item" href="#">Another submenu 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu 3</a></li>
<li><a class="dropdown-item" href="#">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 4 »</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Another submenu 1</a></li>
<li><a class="dropdown-item" href="#">Another submenu 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu 3</a></li>
<li><a class="dropdown-item" href="#">Another submenu 4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 5 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 6 </a></li>
</ul>
</li>
</ul>
</div> <!-- navbar-collapse.// -->
</div> <!-- container-fluid.// -->
</nav>
<!-- ============= COMPONENT END// ============== -->
</div><!-- container // -->