中心带箭头的下拉菜单答案

【问题标题】：dropdown menu with arrow in center中心带箭头的下拉菜单
【发布时间】：2015-07-11 22:32:48
【问题描述】：

我正在尝试创建一个与此处类似的下拉菜单，但我未能成功地正确设置它的样式。

我要创建的菜单类似于 here 找到的菜单

例子：

这是我目前所拥有的！

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}
.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

<div class="dropdown">
  <a data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    Account Settings<hr>Billing
  </ul>
</div>

我无法将箭头居中居中，同时应用“下拉菜单动画效果”

如何使箭头居中？

【问题讨论】：

标签： jquery html css css-shapes

【解决方案1】：

为了改变箭头的位置，只需像这样改变left的值：

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 40%;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 40%;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

JSFiddle

【讨论】：