css - 在多级菜单中隔离 CSS 样式

Question

我正在设计我的菜单样式，由于某种原因它影响了当前菜单项的子菜单。下面的链接是来自同一页面的两个菜单屏幕截图。

Lines Above Sub Menu Items

No Lines Above Sub Menu Items

这是我要使用的行上方的唯一样式:

#topmenu ul a:hover {
   border-top: 2px solid #771e98;
    color: #f2f2f2;
}


#topmenu .current-menu-item a {
    border-top: 2px solid #771e98;
    color: #f2f2f2;
}

我错过了什么吗？我只希望“主页”下的子菜单项是正常的黑色，上面没有紫色线表示已选择或悬停的链接。

Answer 1

您需要指定仅对子元素设置样式，而不是对所有后代元素设置样式。我猜这里是因为你没有显示你的 HTML，但你明白了。

#topmenu > ul > li.current-menu-item > a,
#topmenu > ul > li > a:hover { ... }

More on child selectors