Jquery 中间带箭头的下拉菜单

我正在尝试创建一个像这里这样的下拉菜单，但我还没有成功地将其正确地设置为样式

我要创建的菜单与找到的菜单相似

例如：

这就是我目前所拥有的

@导入url（'http://getbootstrap.com/dist/css/bootstrap.css');
.下拉菜单：之前{
位置：绝对位置；
顶部：-7px；
左：9px；
显示：内联块；
右边框：7px实心透明；
边框底部：7px实心#ccc；
左边框：7px实心透明；
边框底色：rgba（0,0,0,0.2）；
内容：''；
}
.下拉菜单：之后{
位置：绝对位置；
顶部：-6px；
左：10px；
显示：内联块；
右边框：6px实心透明；
边框底部：6px实心#ffffff；
左边框：6px实心透明；
内容：''；
}

帐户设置
计费

要更改箭头的位置，只需更改

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: '';
}