需要帮助来重新创建菜单导航

Question

我一直在尝试复制此网站https://www.vannuysmaserati.com/上导航栏中带有下拉菜单的图标

这是我到目前为止所拥有的。我还没有使用图标。我希望下拉菜单使用一个下拉菜单，而不是每个菜单都有一个下拉菜单。

我希望这些图标共享相同的下拉菜单，但要根据您将鼠标悬停在哪个图标上来更改内容。或者可以使用位于同一位置的多个下拉菜单。

这是一个带有我的代码的codepen：

https://codepen.io/dmads2355/pen/bQPgbJ

<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>