Нажатая кнопка

Всем привет, как в CSS прописать состояние нажатой кнопки (то есть нажал на какую-нибудь кнопку меню перешел на нужную страницу, а кнопка осталась нажатой(с изменённым фоном), потом нажал на другую кнопку: прошлая вернулась в первоначальное положение, а новая "нажалась"). Пытаюсь сделать так:

Код (CODE):

1. ul#mainlevel-nav li a:visited{
2.     color: #003399;
3. background: #FFFFFF;
4. font-weight:bold;
5. }

но это почему-то не работает, все кнопки сразу выделены белым цветом..

 

Речь наверно об активной кнопке?
visited - для посещенных ссылок, для активных джумла прописывает в class active

 

Пардон, вместо кода показало какие-то кракозяблики, на данный момент код выглядит так:
ul#mainlevel-nav li a:visited {
color: #003399;
background: #FFFFFF;
font-weight:bold;
}
но от этого почему то все кнопки выделены, как должно выглядеть вместе с class active ?
ul#mainlevel-nav li a:active {
color: #003399;
background: #FFFFFF;
font-weight:bold;
}
так не работает, помогите пожайлуста

 

дай коды всех строчек где есть mainlevel

 

Если класс, то селектор будет не a:active, а a.active (точка, а не двоеточие).

А, нет, вру. active это тоже псевдо-класс, потому двоеточие корректно

 

может надо исползовать что-то вроде ul#mainlevel-nav li#current a:link

 

Почему это псевдо класс?? Класс самый обычный с точкой

 

Вот пожайлуста:
ul#mainlevel-nav
{
padding: 0;
margin: 0;
font-size: 0.8em;
}

ul#mainlevel-nav li
{
background-image: none;
list-style:none;
padding-left: 0px;
padding-right: 0px;
padding-top: 2px;
float:left;
display: table;
text-align: center;
width: 8.57%;
font-size: 12px;
color:#fff;
line-height: 25px;
vertical-align: middle;
border: 0px solid #fff;
border-bottom: hidden;
border-top: hidden;
}

ul#mainlevel-nav li a
{
padding-left: 18px;
padding-right: 7px;
text-decoration: none;
color: #FFFFFF;
line-height: 26px;
background: transparent;
font-size:12px;
font-weight:bold;
}
ul#mainlevel-nav li a {

padding: 9px 17px 9px 17px;
margin: 10px 1px 20px 1px;
}
#buttons>ul#mainlevel-nav li a {
width: 50px;
height: 50px;
}

ul#mainlevel-nav li a:hover{
color: #003399;
background: #FFFFFF;
font-weight:bold;
}
a.mainlevel:link, a.mainlevel:visited {
display: block;
background: #FFFFFF no-repeat;
vertical-align: middle;
font-size: 13px;
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000;
text-align: left;
padding-top: 5px;
padding-left: 18px;
height: 20px !important;
height: 25px;
width: 100%;
text-decoration: none;
}

a.mainlevel:hover {
background-position: 0px -25px;
text-decoration: underline;

}


a.mainlevel#active_menu:hover {
color: #000;
text-decoration: underline;
}

 

Ну, в принципе одно другому не мешает.
Просто сейчас глянул на свой рабочий сайт и увидел, что именно класс active нигде не добавляется. Либо a#active_menu, либо a#active_menu-nav, потому и решил, что active использовался в стандартном смысле. Когда на ссылку нажать, но не отпустить кнопку мыши, тогда реагирует именно псевдо-класс :active

 

на такую функцию тоже не реагирует:
ul#mainlevel-nav li a.active {
color: #003399;
background: #FFFFFF;
font-weight:bold;
}

может я что-то не так делаю?

 

Так если речь о нажатой но не отжатой то нужно использовать псевдоселектор :active а вот если об активном пункте меню - то класс active.
Только что посмотрел на своем сайте под 1,5,9 -

Код (PHP):

1. li id="current" class="active item1"

P.S. О какой версии вообще речь???

 

Выбери какой-нибудь пункт меню, а потом загляни в исходный код страницы. Выбранный пункт вероятно будет отмечен либо классом, либо идентификатором, так или иначе содержащим слово active. Если, как у меня, id="active_menu-nav", то корректным селектором будет

Код (CODE):

1. ul#mainlevel-nav li a#active_menu-nav {

 

У меня тоже 1.5.9. Вот как выглядит мой выбранный пункт меню:

Код (html):

1. <li><a href="/pricelist/" class="mainlevel-nav" id="active_menu-nav">Прайс-лист</a></li>

 

так тоже не получается

 

Стиль? У меня список..
TC, выложи строчку кода отвечающую за вывод элемента меню

 

_voland_, +1 только хотел это написать )

 

"(Legacy) Плоский список". Только у меня-то проблем как раз нет, предлагаю с проблемой автора разобраться

 

Забыл сразу сказать у джумла 1.0.1.5
Вылаживаю:
ul#mainlevel-nav li
{
background-image: none;
list-style:none;
padding-left: 0px;
padding-right: 0px;
padding-top: 2px;
float:left;
display: table;
text-align: center;
width: 8.57%;
font-size: 12px;
color:#fff;
line-height: 25px;
vertical-align: middle;
border: 0px solid #fff;
border-bottom: hidden;
border-top: hidden;
}
вроде это, или не то выложил (в ксс я полный лопух).

 

Вот изза этого уже 3 страницы трепа.

А выложил не то, надо исходный код (часть) страницы

P.S. 2 slay - сменил на Плоский список, действительно, код такой же стал, так что от вида меню зависит

 

Goryhater, открой исходный код стрницы и найди по ключевому слову каким классом и айди выделяется пункт который выделен сейчас, скажем ты сейчас на странице "Главная", правой клавишей в браузере, показать исходный код, через поиск ищешь строчку где отображается Главная и копируешь весь тег выделения сюда, так мы быстрее найдем решение проблемы.