css - 通过 Wordpress 站点使用 CSS 进行导航和子菜单导航

Question

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

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

“导航栏”是顶部的青色 strip ，有 5 个元素:主页、福利、参与、捐赠和关于我们。在主页上(例如)，您会注意到“主页”周围有一个黄色框。如果您将鼠标悬停在“好处”(例如)上，您会看到有一个子菜单，带有浅/深灰色框。现在，当您单击 Benefits 页面以导航到它时，“Benefits”现在成为您的事件页面，并且导航栏现在有一个黄色框而不是灰色框。

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

当我导航到子菜单页面时，它正确显示，只有事件页面是黄色的。

我该如何做到，当事件页面是导航栏上的主页面时，子菜单框不会也显示为黄色？

如果需要，我愿意发布任何/所有 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 类。