css - 当鼠标悬停在子菜单上时，使用 CSS 保持顶级导航悬停效果

Question

当我悬停在子菜单项上时，我想让我的顶级导航保持悬停状态。我读到我应该将悬停效果应用于 li，但有些过渡让我感到困惑。我想不通。有人可以告诉我需要在哪里调整吗？

我的 jsfiddle

Answer 1

您将希望将:hover效果应用于 li 并将 CSS 应用于直接a子级。将悬停应用到a将不起作用，因为顶级链接的子菜单不在a元素中。

ul#navigation .topNav:hover > a {
    color:#acb453;
    padding-top:0;
    padding-bottom:10px;
    border-bottom: 6px solid #4dbaf2;
}

http://jsfiddle.net/zwVwh/12/