时间戳

首页 > 解决方案 > 如何将子菜单添加到水平 HTML 导航栏

html - 如何将子菜单添加到水平 HTML 导航栏

问题描述

我正在尝试将导航栏下拉菜单之一制作成一个子菜单，该子菜单根据空间向左或向右展开。

我该怎么做呢？我什么都试过了。

<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <!-- Brand -->
  <a class="navbar-brand" href="#">PRODUCT NAME</a>
  <!-- Links -->
  <ul class="navbar-nav">
    <!--A regular navbar link-->
    <li class="nav-item">
      <!--a class="nav-link" href="resources/pages/home.html">Home</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" >Images</a>
      <div class="dropdown-menu">
<!--EDIT THESE ITEMS FOR FLOORS/PAGES-->
        <a class="dropdown-item" href="resources/callout/tore.html" target="iframe1">PAGE NAME</a>
      </div>
    </li>
      <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Videos</a>
      <div class="dropdown-menu">
<!--EDIT THESE ITEMS FOR VIDEOS-->
        <a class="dropdown-item" href="resources/media/vids/" target="_blank">VIDEO NAME</a>
      </div>
    </li>
    <!--Dropdown for additional documents-->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Additional Documents</a>
      <div class="dropdown-menu">
<!--EDIT THESE ITEMS FOR DOCUMENTS-->
        <a class="dropdown-item" href="Resources/media/docs/" target="">DOCUMENT NAME</a>

      </div>
    </li>
  </ul>
</nav>

标签： htmlcsstwitter-bootstrapresponsive-design

解决方案

推荐阅读