1

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

inserir a descrição da imagem aqui

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 &raquo; </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 &raquo; </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 &raquo; </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 &raquo; </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 &raquo;</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 &raquo; </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 &raquo; </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 &raquo;</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 &raquo; </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 &raquo; </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 &raquo;</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 &raquo; </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 &raquo; </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 &raquo;</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 &raquo; </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 &raquo; </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 &raquo;</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 &raquo; </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 &raquo; </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 &raquo;</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 &raquo; </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 &raquo; </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 &raquo;</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 &raquo; </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 &raquo; </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 &raquo;</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 //  -->

1 Resposta 1

-2

Então esse tipo de menu sempre abre para o lado direito, uma outra alternativa seria usar menu lateral que abre para o lado direito naturamente ou para baixao como mostra na imagem, usando adminlte 3.2 inserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .