Question

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

这是我唯一的风格，我将要上线：

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


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

我错过了什么吗？我只想要＆＃39; Home＆＃39;下的子菜单项目。为正常的黑色，没有上面的紫色线表示选定或悬停的链接。

Answer 1

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

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

<强> More on child selectors

Answer 2

您似乎只是为父级ul设计样式。我认为您的父级ul包含#topmenu

你需要这样的东西来设置下拉菜单的样式：

#topmenu > ul > li > ul a:hover{
}

如果没有相关的HTML代码，很难搞清楚。

在多级菜单中隔离CSS样式

2 个答案: