html - 底部的 CSS 选定项导航箭头

Question

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

有人对如何为上面的屏幕截图中所示的导航项指定“选定的”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;
}

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