css导航-css三角形

需要帮助吗

以下是目前的情况（我已经删除了响应部分）

基本上，我被困在如何创建下拉三角形上，这样它就能工作，并且居中。 -导航来自cms，因此我无法确定导航点的确切尺寸（宽度）

基本上，我似乎有一个大脑崩溃，需要帮助

---

ps-css来自compass/sass，使用skelton

三角形，现在可以使用伪类处理

看看这把小提琴，你会发现：

---

然而，在你的例子中，你也需要三角形中的边界，这使得它更难。我认为最快的解决方案应该是使用图像来代替。

好了，我们已经更新了我的JSFIDLE

.keith > li:hover {
  position: relative; background: #ffffff; border: 1px solid #005381;
  color:#005381;
  z-index: 100000;
}
.keith > li:hover:after, .keith > li:hover:before {
  top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position:   absolute; pointer-events: none;
}
.keith > li:hover:after { border-color: rgba(255, 255, 255, 0); border-top-color: #ffffff; 
border-width: 10px; left: 50%; margin-left: -10px; }
.keith > li:hover:before { border-color: rgba(0, 83, 129, 0); 
border-top-color: #005381; border-width: 11px; left: 50%; margin-left: -11px; }

---

定位三角形的元素，使其水平居中于对象下方，垂直定位，使三角形重叠。然后进行边框/宽度修改，以获得创建所需三角形的顶部边框。hmmmm我已经删除了我的边框，并编辑了我的JSFIDLE，但不知何故仍然没有三角形。很明显，有些地方还是不对劲，但我看不出来。编辑[链接]