html - 导航工具提示位置错误

我为此导航创建了工具提示箭头。它们在悬停时显示，但也显示在下拉菜单的底部。我想知道什么代码将它们保留在那里！

这是我用来实现它们的代码。

Link to dev site

.cftopnavrightlower ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #FFC700;
margin-left: -10px;
}

最佳答案

对于箭头所针对的UL，您需要更高的特异性。 ul.flyout使用给定当前选择器的箭头设置样式。

这可能会更好：

#menu-header-nav > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #FFC700;
margin-left: -10px;
}

关于html - 导航工具提示位置错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15098138/