子菜单下拉查询

时间:2019-08-13 02:47:22

标签: html css drop-down-menu dropdown

需要添加多个下拉菜单,例如:

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

1 个答案:

答案 0 :(得分:0)

我已经使用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