如何在同一个下拉菜单中创建多个下拉菜单。

Question

我一直在尝试复制此网站https://www.vannuysmaserati.com/上导航栏中的图标部分

这是我到目前为止所拥有的。我还没有使用图标。我希望下拉菜单使用一个下拉菜单，但每个菜单都不使用一个。 https://codepen.io/dmads2355/pen/bQPgbJ

<br>
<br>
<div class="container example2">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="http://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills">
        </a>
      </div>
      <div id="navbar2" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">P <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <p>phone</p>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">H <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <p>Hours</p>
            </ul>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>
</div>

谢谢