CSS导航元素悬停与底部边框

Question

我试图复制以下效果：http://amplifiedvideodesign.com/capture.png

我可以设置悬停的背景颜色，但我如何处理底部的边框和小箭头？

感谢。

Answer 1

对于边框，您只需使用相同的代码即可设置边框并更新其颜色。 You can try my example on jsFiddle

.tabs a:hover {
    background-color: #444;
    border-bottom-color: #484;
    color: #484;
}

至于箭头/菱形/三角形：这是你无法轻易设置的东西，但最简单的解决方案是添加背景而不是使用纯HTML / CSS。

更新：Here's an animated example.