通过 Wordpress 网站使用 CSS 进行导航和子菜单导航

Question

如果这篇文章毫无意义，我深表歉意，我对 CSS 非常非常陌生，另外一些术语对我来说是新的，我不完全确定我是否正确使用它。

我正在帮助调整为 Wordpress 创建的现有网站。 (www.teloscares.org)。这是我遇到的问题（作为旁注，我使用（例如）这意味着我目前在该页面上。我试图做的是通过解释我的页面来描述我的问题m on 等）：

“导航栏”是顶部的青色条带，上面有 5 个项目，家庭、福利、参与、捐赠和关于我们。在主页上（例如），您注意到“主页”被一个黄色框包围。如果您将鼠标悬停在“福利”（例如）上，您会看到有一个子菜单，带有浅/深灰色框。现在，当您单击“福利”页面以导航到它时，“福利”现在成为您的活动页面，并且导航栏现在有一个黄色框而不是灰色。

我遇到的问题是，虽然“好处”框应该是黄色的，但子菜单项也显示为黄色，我希望它们保持灰色。

当我导航到子菜单页面时，它会正确显示，只有活动页面为黄色。

如何使当活动页面是导航栏上的主页面时，子菜单框不会也显示为黄色？

如果需要，我愿意发布任何/所有 style.css 文件。非常感谢您对此事的帮助。我一直在尝试在谷歌上找到解决方案，但运气不佳。

-乔什

Answer 1

这是导致问题的代码，在样式表的第 1331 行。

/* Removing this ALSO seemed to remove the yellow Block. 
    Changing the color property changed the text WITHIN the yellow block, but not
    the color of the yellow block itself. Hm..... -Josh */
.main-header .navigation ul li.current_page_item a {

    color: #000; /* was 000 */

    /* Taking out THIS line removes the yellow block, but from both the main and sub-pages. -Josh */
    background: url('images/bg_header.png') repeat-x left top;

}

把它改成这个，瞧 :)

.current-menu-item {

    color: #000; /* was 000 */
    background: url('images/bg_header.png') repeat-x left top;

}

您之前的选择器，ul li.current_page_item a 选择了 li.current_page_item 中的所有链接。我们只想要顶部，而 WordpPress 使用 .current-menu-item 类。

Answer 2

发生这种情况是因为您将背景图像应用于“li”内的所有“a”。你应该改用这个：

.main-header .navigation ul li.current_page_item > a { .. }