时间戳

首页 > 解决方案 > 子菜单下拉查询

html - 子菜单下拉查询

问题描述

需要添加多个下拉菜单，例如：

1. Products
  1.1 Products Menu
    1.1.1 Submenu One
    1.1.2 Submenu Two
  1.2 test

2. Quality

尝试过使用下拉类和子菜单包装器的不同组合。需要帮助

<li class="dropdown"><a href="#">Our Products <b class="caret"></b></a>
    <!-- submenu-wrapper -->
    <div class="submenu-wrapper submenu-wrapper-topbottom">
        <div class="submenu-inner  submenu-inner-topbottom">
            <ul class="dropdown-menu">
                <li><a href="#">Cable Management System <b class="caret"></b></a></li>


                <li><a href="#">Facade, Concrete & Blockworks Products</a></li>
                <li><a href="#">Architectural & Industrial Products</a></li>
            </ul>
        </div>
    </div>
    <!-- /submenu-wrapper -->
</li>

预期产出

1. Products
  1.1 Cable Management System
    1.1.1 Submenu One
    1.1.2 Submenu Two

  1.2 Facade

  1.3 Architecture

标签： htmlcssdrop-down-menudropdown

解决方案

我已经使用这样的 HTML 5 完成了与您的查询类似的操作。如果您需要更多详细信息，请随时发表评论或提出建议。

      <a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Products
      </a>
      <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
          <li class="dropdown-submenu">
            <a class="dropdown-item" href="####">Products Menu</a>
            <ul class="dropdown-menu">
              <li class="dropdown-item"><a [routerLink]="['####']">Submenu One</a></li>
              <li class="dropdown-item"><a [routerLink]="['####']">Submenu Two</a></li>


            </ul>
          </li>
         <li class="dropdown-item"><a href="#">Test</a></li>
        </ul>

谢谢， Prithwi PC

推荐阅读