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

Question

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

我的杰斯菲德尔

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/