Активный DIV в меню - Вопросы по CSS

Что-то я переработался и не могу понять никак, как правильно сделать:
Имею:

HTML:


CSS:


Т.е. при наведении в каждом меню иконка 1 по умолчанию перед названием меняется на иконку 2 перед названием и обратно, если убрать мышку.

Как сделать, чтобы при переходе в Меню 2 иконка 2 осталась активной в активном меню (в Меню 2)?
Ну и обратно, при нажатии и переходе в Меню 1, иконка в Меню 2 стала иконкой 1, а иконка 1 в Меню 1 стала иконкой 2.

Простое вроде CSS ?но что-то я туплю.Напишите, кому не сложно... Не хватает что-то ума)))  

Зы или может проще решение есть(JS не катит, только css)

Вам нужно просто чтобы при наведении картинка в меню менялась? Зачем такой сложный код, с дублирующими пунктами и т.д.?

Вам нужно просто чтобы при наведении картинка в меню менялась? Зачем такой сложный код, с дублирующими пунктами и т.д.?

Да как-то я начал с него(ранее не было цели, просто смена при наведении, чтоб долго не думать)...

Распишите, если не сложно HTML и CSS в моём случае...

Зы.Она и так меняется, пусть и код Неправильный особо, мне надо кроме этого, чтоб после перехода иконка 2 оставалась активной, и при обратном переходе, активная сменилась на иконку 1, а неактивная стала активной.

Пример:

Меню 1 и Меню 2

По дефолту мы находимся в Меню 1 и перед названием стоит иконка 2(т.е. активная, т.к. мы в этом меню)
Перед названием же Меню 2 стоит иконка 1(но при наведении меняется на иконку 2 и обратно, при убирании мышки на иконку 1)
При переходе в Меню 2 иконка перед Меню 2 стала иконкой 2, т.е. активной и не меняется.
В свою же очередь перед Меню 1 иконка 2 стала иконкой 1, т.к. меню не активное, но при наведении иконка 1 меняется на иконку 2 и обратно, маякуя этим, что я попадаю на ссылку, тоже самое, как и до этого в Меню 2, если бы мы были в Меню 1

Всего две иконки 1(неактивная) и 2(активная или при наведении)
...Вроде подробно написал

1. Верните разметку на стандартную, джумловскую:


Где классы ico* — вы назначаете в менеджере меню в поле css-класс пункта меню, а класс active назначает сама Joomla

2. Соберите все иконки в спрайт, где можно нарисовать все желательные варианты: при наведении, активный и т.д.

3. Дальше просто стилями:

У меня отдельным кодом и CSS сменный модуль, он к Joomla не относится, хотя стоит в модуле и в Joomla.В модуле меню находится.

Тогда нужно как-то прописать логику, по которой активный пункт меню будет получать отличительный класс. Например, можно href ссылки сравнивать с текущим url.

Понимаю, но вот как именно это сделать....  ! Чтобы модуль (точнее этот код) был автономен и независим.
А если я привязываю в переходах (при клике) джумловские страницы/страницы joomshoppinga, как быть в этом случае? чтоб меню реагировало по моей логике?

Можно разобрать ссылку на составляющие и сравнивать с частями URL.