css menu - активный пункт главного меню

Question

Я использую меню CSS, предоставляемое пакетом WPML.

Мне бы хотелось, чтобы активный пункт главного меню оставался синим, когда он активен.

То, что я сделал в прошлом, это применил цвет к .li selected_page

проблема в том, что ко всем элементам подменю также применен этот тег, что означает, что в большинстве браузеров (странно, не в текущем firefox), когда он активен, все элементы меню, включая элементы подменю, отображаются синим цветом. 1007 *

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

-EDIT- после всей помощи: как обычно, решение - это сумма всей вашей помощи :) Я, наконец, сделал это, используя следующий код:

#menu-wrap li.selected_page a { color: #1983AF; } 
#menu-wrap ul li.selected_page ul>li>a { color: #000; }
#menu-wrap ul li.selected_page ul>li>a:hover { color: #1983AF};

Answer 1

Попробуйте ">" CSS-селектор, что-то вроде "# cms-nav-top-menu> li.selected_page {color: blue;}"

Однако это не будет работать в старых браузерах.

См. http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Answer 2

Я думаю, что проблема в наследстве - ваш стиль

#menu-wrap li.selected_page {
    color: #1983AF;
}

перезаписывается на

#menu-wrap ul a {
    color: #333333;
}

Попробуйте обновить первый пример следующим образом:

#menu-wrap ul li.selected_page a {
    color: #1983AF;
}

Это должно заставить его иметь приоритет в CSS. Надеюсь это поможет! Желаем удачи.

РЕДАКТИРОВАТЬ НА ОСНОВЕ КОММЕНТАРИИ:

Чтобы подпункты не отображались синим цветом, добавьте это - изменив # 000 на любой цвет, который вы пожелаете:

#menu-wrap ul li.selected_page a ul a {
    color: #000;
}

И если вам нужен другой цвет для выбранных вложенных элементов, просто добавьте цвет к этому селектору (уже в вашей таблице стилей):

#menu-wrap li.selected_subpage

Удачи!

Answer 3

li.selected_page a:first-child
{
    color:#1983AF;
}

CSS2