CSS 底部的选定项目导航箭头

Question

我在制作 CSS 样式的导航栏时遇到问题，该导航栏有一个白色箭头（三角形）向上指向所选的导航项。白色箭头（三角形）与下面的主体融合在一起，并以文本框为中心。像这样的截图：

有人对如何为上面的屏幕截图中所示的导航项指定 "selected" CSS 样式有任何建议吗？

我正在尝试创建一个名为 "activate" 的 CSS 样式，因此 <li class="activate"><a href="#">Overview</a></li> 制作了箭头。这是我目前所拥有的 jsfiddle https://jsfiddle.net/v680tfvr/ 哪种有效，但是当用户将鼠标悬停在菜单项上时突出显示太大，并且第二个小箭头出现在顶部附近。看似简单，我就是想不通！

Answer 1

我做了以下修改：

修复了边框
修正了标题
那个神秘的东西不会在悬停时出现

代码

.submenu {
    height: 40px;
    overflow: hidden;
}

.submenu .activate:after {
    content: '';
    position: relative;
    width: 0;
    height: 75px;
    left: 40%;
    top: -39px;
    border-left: 10px outset transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ffffff;
}

CSS 底部的选定项目导航箭头

CSS Selected Item Navigation Arrow on Bottom

html

css

css-shapes

代码

Fiddle: https://jsfiddle.net/v680tfvr/5/