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

Question

我无法制作一个CSS样式的导航栏，其中有一个向上指向所选导航项的白色箭头（三角形）。白色箭头（三角形）与下方的主体混合，并以文本框为中心。像这个截图：

任何人都有关于如何指定＆＃34;所选＆＃34;的任何建议。导航项的CSS样式，如上面的截图所示？

我尝试创建名为＆＃34;激活＆＃34;的CSS样式，因此<li class="activate"><a href="#">Overview</a></li>生成箭头。这是我到目前为止的一个问题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;
}

小提琴：https://jsfiddle.net/v680tfvr/5/