Блог

Я использую AdminLTE3 шаблон вместе с кодом, который я нашел в codepen, для создания вертикального мега-меню.

Проблема, с которой я сейчас сталкиваюсь, видна на рисунке ниже

Можно ли удалить подменю за пределы navbar для лучшего просмотра.

 <aside
  class="main-sidebar sidebar-primary elevation-4"
  style="background-color: #f2f2f2"
>
  <a [routerLink]="['home']" class="brand-link bg-blue">
      <img
        src="../../assets/LLlogo.png"
        alt="AdminLTE Logo"
        class="brand-image img-circle elevation-3"
        style="opacity: 0.8"
      />
      <span class="brand-text font-weight-light" style="color: black"
        >LD</span
      >
    </a>
    <div class="sidebar">
      <nav class="mt-2">
<ul
          class="menu nav nav-pills nav-sidebar nav-child-indent flex-column"
          data-widget="treeview"
          role="menu"
          data-accordion="false"
        >
          <li class="nav-item">
            <a href="#">MEGA MENU 1</a>

            <div class="megadrop">
              <div class="col">
                <h3>Title</h3>
                <ul>
                  <li ><a href="#">Sub-menu 1</a></li>
                  <li class="nav-item"><a href="#">Sub-menu 2</a></li>
                  <li class="nav-item"><a href="#">Sub-menu 3</a></li>
                </ul>
              </div>
            </div>
          </li>

          <li>
            <a href="#">MEGA MENU 2</a>
          </li>

          <li>
            <a href="#">MEGA MENU 3</a>
          </li>
          <li>
            <a href="#">MEGA MENU 4</a>
          </li>
        </ul>
      </nav>
    </div>
</aside>
  

CSS, который я использую, похож на codepen link приведенный выше.

Документацию Admin LTE можно найти здесь

Дайте мне знать, если потребуется какая-либо дополнительная информация

Я пытаюсь добиться такой структуры, как наложение

Поскольку этот выпадающий список охватывает содержимое, я ищу аналогичную структуру