Двухуровневое меню с подсвечиванием активных пунктов - Вопросы по CSS

Приветствую!

Пытаюсь сделать что-то типа такого в плане меню. Т.е. нужно, чтобы в некоторых пунктах появлялось дополнительное меню с немного другим оформлением, чтобы активные пункты подсвечивались другим цветом.
Пока затупил именно на подсвечивании активного пункта (не путать с наведением мышкой). Насчет второго уровня меню из простого придумал сделать несколько подменю, которые просто привязать к нужным пунктам основного меню.
По поводу немного другого стиля оформления менюшки - даже лень отдельный шаблон делать. Думаю в том же файлике для нового суффикса описать то же самое, только чуть изменить.

На правильном ли я пути? Можно ли это сделать проще готовыми красивыми решениями? Как быть с подсвечиванием активных пунктов? (a:active не предлагать, не работает оно так просто).

Версия Joomla 3.3.3.
Стоит на денвере (Apache/2.2.22 (Win32) mod_ssl/2.2.22 OpenSSL/1.0.1c PHP/5.3.13)

Ну и собственно прошу прощения, если что-то сразу не пойму. Я еще не волшебник, а только учусь.

...
Как быть с подсвечиванием активных пунктов? (a:active не предлагать, не работает оно так просто).

Вообще-то используется li:active ...
может в этом проблема?

шансы на помощь 0,1% - ибо сайт ваш локален

Вообще-то используется li:active ...
может в этом проблема?

хм. сейчас код не перед глазами. ну вот образно:

.moduletable_topmenu ul li a {
display:block;
padding:0 15px;
text-decoration:none;
color:#fff;}

Это общий вид.

.moduletable_topmenu li a:hover{
display:block;
color:#98cfdd;
text-decoration:underline;}

Это при наведении.

а если a:active и т.д. - то не работает.)

ДоктоР, что я делаю не так?

попробуйте:

попробуйте:

Код: css

.moduletable_topmenu ul>li.active a { 
  стили для активного пункта первого уровня 
}
.moduletable_topmenu ul>li.active li.active a { 
  стили для остальных уровней
}

Не сработало, увы. Но спасибо за ответ вам в любом случае. Буду искать еще способы.

upd. Внезапно! уходил на час по делам. Вернулся - работает. Кэш матьиво. Спасибо огромное)

upd. Обнаружилась проблема. Так как второй уровень меню я делал просто добавлением другого меню, а не вложенными пунктами, то второй код не подходит для него. И на вложенных пунктах верхнее меню не чувствуется, за исключением первого пункта подменю. Наверное путанно объяснил. Проще скриншотами.

- главная страница. активен первый пункт меню и первый подпункт, все работает.

- пункт "новости" вложенного подменю активен, пункт "главная" основного уже нет.

Опять пора к доктору на лечение похоже.)

попробуйте:

Код: css

.moduletable_topmenu ul>li.active a { 
  стили для активного пункта первого уровня 
}
.moduletable_topmenu ul>li.active li.active a { 
  стили для остальных уровней
}

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

Вот например в неразвернутом виде выглядит прилично
А если щелкнуть по пункту меню "Планирование визита", то внизу выскакивают его подпункты, которые раздвигают верхнее и начинаются не с начала строки, а ровно под своим родительским пунктом меню

Заранее благодарю за консультацию.

Дочернее подменю обычно позиционировано абсолютно

Дочернее подменю обычно позиционировано абсолютно

Код: css

.moduletable_topmenu > ul { 
position: relative;
}
.moduletable_topmenu > ul>li.active > ul { 
...
position: absolute;
left:0;
top:100%;
...
}
 /* значения подбираете сами */

Так, общий контейнер подменю понял, как записать. Осталось разобраться с пунктами.)

Правильно ли я понимаю, что .moduletable_topmenu > ul>li.active > ul li - для пунктов
.moduletable_topmenu > ul>li.active > ul li a - для ссылок
.moduletable_topmenu > ul>li.active li.hover a - для ссылок  при наведении
.moduletable_topmenu > ul>li.active li.active a - для активных ссылок?

Заранее прошу простить мою глупость, если где-то допущена.

Потому что вот как стало теперь



Очевидно пункты подменю неправильно описаны. Хотя там
{float:left;
list-style:none;
position:relative;}

подменю позиционировано абсолютно, ему нужно явно задать ширину, например 100%

подменю позиционировано абсолютно, ему нужно явно задать ширину, например 100%

С этим разобрался. Спасибо огромное! Осталось выяснить с этим позиционированием. Несмотря на параметр absolute, позиционирование для дочернего подменю отсчитывается от родительского пункта. Т.е. однозначно задать для всех пунктов позиционирование не получится. Условно говоря, относительно 2 пункта родительского меню позиция смещена на 111 пикселей влево, чтобы начинать с самого начала строки, ровно под "главная". Если же аналогичные подменю будут у 3 пункта родительского меню, то смещение на 111 пикселей влево не даст начало строки, а будет отстоять от него на ширину 3 пункта родительского меню.