带空白nowrap的导航栏中的下拉菜单-BS4

Question

使用Vue-bootstrap下拉组件：b-nav-item-dropdown

当客户端的屏幕分辨率较小时，在Navbar中使用下拉元素进行水平滚动时会出现问题。

代码

    <b-nav class="justify-content-end">
      <b-nav-item class="nav__map" active>First item</b-nav-item>
      <b-nav-item class="nav__help">Second item</b-nav-item>
      <b-nav-item-dropdown class="nav__city" text="New-York" extra-toggle-classes="nav-link-custom" right>
        <b-dropdown-item>New-York</b-dropdown-item>
        <b-dropdown-item>San Francisco</b-dropdown-item>
      </b-nav-item-dropdown>
    </b-nav>

CSS

  .nav {
    white-space: nowrap;
    overflow-x: auto;
    display: inherit;

    .nav-item {
      display: inline-block;
    }
  }

因为当我单击一个下拉列表时，white-space: nowrap的弹出式菜单位于所有元素的后面：

我尝试过玩z-index，但没有成功。