Навигация и подменю Навигация с помощью CSS через сайт Wordpress

Question

Прошу прощения, если этот пост не имеет никакого смысла, я очень, очень новичок в CSS, кроме того, некоторые термины для меня новы, и я не совершенно уверен, что я правильно его использую.

Я помогаю настроить существующий веб-сайт, созданный для Wordpress. (Www.teloscares.org). Вот проблема, с которой я сталкиваюсь (в качестве побочного примечания я использую (например), что означает, что я нахожусь на этой странице. То, что я пытаюсь сделать, это описать мою проблему, объяснив, m on и т. д.):

«nav-bar» - это полоса голубого цвета вверху с 5 элементами, домашняя страница, преимущества, участие, пожертвование и о нас. На домашней странице (например) вы заметите, что «Главная» окружена желтой рамкой. Если вы наведите указатель мыши на «Преимущества» (например), вы увидите, что есть подменю с ящиками светлого/темно-серого цвета. Теперь, когда вы НАЖМИТЕ на странице «Преимущества», чтобы перейти к ней, «Преимущества» теперь становятся вашей активной страницей, а на панели навигации теперь вместо желтого окна вместо желтого.

ПРОБЛЕМА У меня есть то, что, хотя поле «Преимущества» должно быть желтым, элементы подменю также отображаются желтым цветом, и я хочу, чтобы они сохранили свой серый цвет.

Когда я перехожу к странице подменю, она отображается правильно, ТОЛЬКО активная страница становится желтой.

Как сделать так, чтобы, когда активная страница является главной страницей на панели навигации, окна подменю также не отображаются желтым?

Если необходимо, я готов опубликовать любой/весь файл style.css. Большое вам спасибо за помощь в этом вопросе. Я пытался найти решение на Google с небольшой удачей.

-Josh

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

Это происходит потому, что вы применить фоновое изображение для всех «а» внутри «ли». Вы должны применять вместо этого:

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