css nav - css三角形

Question

并需要一些帮助

这是现在的状态（我删除了响应部分）

现在说

基本上我坚持如何创建下拉三角形，以便它工作，并居中。 - 导航是从cms出来的，所以我无法确定导航点的确切尺寸（宽度）

基本上我似乎有脑子崩溃，需要帮助！

ps - css来自使用skelton的指南针/ sass

Answer 1

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

看看这个小提琴的想法：

http://jsfiddle.net/carlosmartinezt/PwEyq/

但是，在您的情况下，您还需要三角形中的边框，这使得它更难。 我认为最快的解决方案是使用图像。

Answer 2

确定它使用以下 - 更新了我的jsfiddle

.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; }