<div> 中下拉菜单的自定义

Question

我的任务是获取这样的元素：

导航项中有一个下拉菜单，菜单上有一个顶部居中的三角形，下拉菜单位于中心。

这是我迄今为止的尝试：FIDDLE: Right dropdown design

我已将中心的下拉菜单定位到父 div，但我仍然无法获得所需的结果：

1.让导航上方的下拉菜单不在即将到来的导航内。

2。获取尚未对齐的下拉列表正上方的三角形，背景为白色，边框颜色与下拉列表相同

nav.navbar {
  padding: 1.1rem 1rem;
  background-color: #ffffff;
  box-shadow: 0 5px 5px #f1f1f1
}

.custom-button {
  height: 34px;
  width: 34px;
  font-size: 14px;
  border-radius: 50%;
  color: rgb(162, 197, 252);
  border: 1px solid rgb(162, 197, 252);
  background-color: Transparent;
}

.dropdown:hover .dropdown-menu {
  display: block;
  margin: 0 auto;
}

.dropdown {
  text-align: center
}

.dropdown-menu {
  min-width: 140px;
  min-height: 140px;
  position: absolute;
}

.dropdown a {
  color: rgb(192, 192, 192);
  font-size: 12px
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md">
  <div class="container">
    <a class="navbar-brand" href="#">Testing</a>
    <ul class="navbar-nav mr-auto"></ul>
    <ul class="navbar-nav" *ngIf="userService.token()">
      <li class="nav-item">
        <div class="dropdown">
          <button class="custom-button">NL</button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Classes</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Profile</a>
            <a class="dropdown-item" href="#">Settings</a>
            <a class="dropdown-item" href="#">Logout</a>
          </div>
        </div>
      </li>
    </ul>
  </div>
</nav>

Answer 1

如果您想在悬停时显示下拉菜单，则需要使用 css 进行一些修复..

使用变换使您的下拉菜单居中。此外，您根据 bootstrap4 navbar 下拉文档使用了错误的下拉标记..

^{参考链接：Bootstrap4 Navbar Dropdown}

我已将其更改为更新的小提琴。

Updated Fiddle