Question

我很抱歉，如果这篇文章几乎没有任何意义，我是非常非常新的CSS，另外一些术语对我来说是新的，我不完全确定我正确使用它。

我正在帮助调整为Wordpress创建的预先存在的网站。（www.teloscares.org）。这是我遇到的问题（作为旁注，我使用（例如）这意味着我当前正在那个页面上。我试图做的是通过解释我的页面来描述我的问题等等。）：

“nav-bar”是青色的彩色条状，上面有5个项目，Home，Benefits，Get Involved，Donate和About Us。在主页（例如）中，您注意到“Home”被黄色框包围。如果您将鼠标悬停在“好处”（例如）上，您会看到有一个子菜单，带有浅灰色/深灰色框。现在，当您点击“福利”页面以导航到它时，“福利”现在变为您的活动页面，导航栏现在有一个黄色框而不是灰色。

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

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

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

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

-Josh

Answer 1

这种情况正在发生，因为您将背景图像应用于“li”中的所有“a”。你应该改为申请：

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

Answer 2

以下是导致问题的代码，即样式表的第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类。

通过Wordpress站点使用CSS导航和子菜单导航

2 个答案: