Joomla 1.5 Дороботка стиля простого вертикального меню

Прошу вашей помощи! Вопрос, как я понимаю, довольно простой, но у меня он вызывает ступор уже на протяжении недели! В джумле я новичек, так что прошу сильно не ругать

Накидала я сайт в html, чтобы точно знать какой результат хочу получить от joomla.
Вот результат вертикального меню:


В Джумле же мне удалось реализовать только таким образом:

Помогите исправить!!!!!!!

1) Категория меню (слинги) НЕ КРАСНОГО цвета, НЕТ ПОДЧЕРКИВАНИЯ, размер ПРЕЖНИЙ, МЕНЯЕТСЯ при наведении курсора
2) межстрочный интервал у разделов большой
3) отсутствие отступа у разделов относительно категории
3.а) отступ появляется только при наведении указателя


Кусок кода для левого меню (index.php)

Код (PHP):

1. <div id="leftmenu">
2.         <div id="leftmenu_sl"> <!--для вывода меню СЛИНГИ-->
3.             <jdoc:include type="modules" name="left_sl"/>
4.         </div>
5.         <div id="leftmenu_korm"> <!--для вывода меню ОДЕЖДА ДЛЯ КОРМЛЕНИЯ-->
6.             <jdoc:include type="modules" name="left_korm"/>
7.         </div>
8.         <div id="leftmenu_tov"> <!--для вывода меню ДЕТСКИЕ ТОВАРЫ ДЛЯ ДОМА-->
9.             <jdoc:include type="modules" name="left_tov"/>
10.         </div>
11.         <div id="leftmenu_nal"> <!--для вывода меню ТОВАРЫ В НАЛИЧИИ-->
12.             <jdoc:include type="modules" name="left_nal"/>
13.         </div>
14.     </div>

Стили css:

Код (PHP):

1. #leftmenu{
2. float: left;
3. padding: 0px 0px 0px 10px;
4. width:180px;
5. text-align: left;
6. font-family: Segoe Print;
7. line-height: 10px;
8. text-indent: 25px;
9. text-decoration: none;
10. }
11.  
12. #leftmenu_sl_zag{
13. float: left;
14. font-size: 16px;
15. color:red;
16. }
17.  
18. .zsl{
19. float: left;
20. font-size: 26px;
21. color:red;
22. }
23.  
24. #leftmenu :link {     /*еще непосещенные ссылки*/
25. line-height: 10px;
26. font-family: Segoe Print;
27. font-size: 14px;
28. text-indent: 25px;
29. color:black;
30. text-decoration: none;
31. }
32.  
33. #leftmenu :visited { /*посещенная ссылка*/
34. line-height: 10px;
35. font-family: Segoe Print;
36. font-size: 14px;
37. text-indent: 25px;
38. color:black;
39. text-decoration: none;
40. }
41.  
42. #leftmenu_sl:active { /*нажатая ссылкк */
43. line-height: 10px;
44. font-family: Segoe Print;
45. font-size: 16px;
46. text-indent: 25px;
47. color:red;
48. /*font-weight: 600;*/
49. text-decoration: none;
50. }
51.  
52. #leftmenu_korm :active { /*нажатая ссылкк */
53. line-height: 10px;
54. font-family: Segoe Print;
55. font-size: 16px;
56. text-indent: 25px;
57. color:e5ff00;
58. /*font-weight: 600;*/
59. text-decoration: none;
60. }
61.  
62. #leftmenu_tov:active { /*нажатая ссылкк */
63. line-height: 10px;
64. font-family: Segoe Print;
65. font-size: 16px;
66. text-indent: 25px;
67. color:0006ff;
68. /*font-weight: 600;*/
69. text-decoration: none;
70. }
71.  
72. #leftmenu_sl :hover{
73. line-height: 10px;
74. font-family: Segoe Print;
75. font-size: 16px;
76. text-indent: 25px;
77. color:red;
78. text-decoration: none;              /*наведение курсора*/
79. }
80.  
81.  
82. #leftmenu_korm :hover{
83. line-height: 10px;
84. font-family: Segoe Print;
85. font-size: 16px;
86. text-indent: 25px;
87. color:e5ff00;  
88. text-decoration: none;          /*наведение курсора*/
89. }
90.  
91. #leftmenu_tov :hover{
92. line-height: 10px;
93. font-family: Segoe Print;
94. font-size: 16px;
95. text-indent: 25px;
96. color:0006ff;  
97. text-decoration: none;          /*наведение курсора*/
98. }

 

Я че то не совсем понял цель задания, конкретно обьясни че надо добавить

 

Мне необходимо доработать меню в Joomla до внешнего вида меню html.
А конкретно пункты, приведенные ниже:

Понимаю, что дело с классами, суффиксами.... но реализовать самой никак не получается!

 

тебе надо что бы при наведении менялось так это hover. все равно ничего не понял...
тебе надо вид при наведении изменить или без наведения?

 

пиши лучше в личку, желательно в контакт. id14848130

 

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

 

Проблема решена! Все оказалось гораздо проще!
Может кому пригодится...

Все изменения со стилем нао делать в css, используя классы, которые можно посмотреть в браузере! (у меня опера - там кликнуть правой кнопкой и далее на "проинспектировать элемент")

Редактировать css таким макаром:
(пример был приведен Trol'ем)

Код (CODE):

1. <div class="menu">
2. <ul>
3. <li class="m1">пунк 1</li>
4. <li class="m2">пункт 2</li>
5. </ul>
6. </div>
7. сделаем пункты меню синим, апри наведении красным в ксс
8. .menu ul li { /*все пункты мню синими*/
9. background:#0000ff;
10. }
11. .menu ul li :hover{ /*при наведении нужный пункт крассный*/
12. background:#ff0000;
13. }
14.  
15. добавим ко второму пункту меню что бы текст был побольше
16. .menu ul li.m2 { /*добавляем класс, и пишем нужный код*/
17. font-size:16px;
18. }
19.  
20. вот помошник html и css htmlbook.ru

За что большое спасибо Trol!