需要一些帮助
这是目前的情况(我已经删除了响应部分)
基本上我被困在如何创建下拉三角形,以便它工作,并居中。- 导航来自 cms,所以我无法确定导航点的确切尺寸(宽度)
基本上我似乎大脑崩溃了,需要帮助!
ps - css 来自 compass / sass 使用 skelton
现在可以使用伪类处理三角形。
看看这个小提琴的想法:
http://jsfiddle.net/carlosmartinezt/PwEyq/
但是,在您的情况下,您还需要三角形中的边框,这使得它更难。我认为最快的解决方案是使用图像。
好的,可以使用以下内容 - 更新了我的 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; }