В этой статье рассмотрим как самому сделать горизонтальное выпадающее меню в Joomla.
Это будет лёгкое меню на CSS, которое не нагружает сайт.
Так же рассмотрим как сделать другое оформление для определённого пункта меню.

В большинстве шаблонов выпадающее меню предусмотрено разработчиками, но всё же встречаются шаблоны в которых его нет. Или оно не выпадающее.

Один такой шаблон я нашёл и на его примере обьясню как это сделать.
Скачать этот шаблон вместе с исходниками меню можно чуть выше.

Итак, вот скриншот этого шаблона. На нём указано куда будет вставлено новое меню.

А на следующем скрине, при помощи FireBug определяем место в index.php.
Между div id="boxes и div class="clear wrapper" создадим новый блок с новыми свойствами.

Как искать место под меню мы разбирали в прошлой статье. Можно вставлять в уже имеющийся блок, либо создавать блок с нуля - это попроще.

Переходим в файл index.php нашего шабона. И между указанными блоками создаём новый с id="horizontal" и вставляем туда модуль с аналогичным названием:

<div id="horizontal">
<jdoc:include type="modules" name="horizontal" style="xhtml" />
</div>

Сохраняем, после чего открываем файл TemplateDetails.xml и в нём указываем новую позицию модуля.

<position>horizontal</position>

Далее идём в админку (Расширения - Модули) и:

• для модуля меню (я сделал для главного меню) указываем позицию horizontal,
• Отображать заголовок - ставим Нет
• плюс дописываем суффикс класса меню, например _up
• в параметрах модуля ставим Всегда показывать подпункты - Да

Это мы сделали для того чтобы меню имело свой собственный класс menu_up.
По умолчанию все меню в Joomla имеют класс menu.

Теперь пришла пора сделать вложенные пункты для этого меню. Именно вложенные пункты будут выпадать при наведении.

Заходим Меню -> Главное меню (или другое которое будуте менять). 
Нажимаете создать новый пункт, выбираете его тип, указываете название, псевдоним и т.д.
И указываете родительский пункт (при наведении на который будет выпадать новый пункт - он называется вложенный)

После того как создадите нужное количество пунктов переходим к редактированию файла стилей шаблона. Обычно это template.css, указывать стили можно в любом месте.

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

1. Сначала указываем размеры нашего блока для меню.
Высота 40 пикс, ширина 960 пикс = ширине блока с контентом, чтобы было красиво.
Фон - чёрный.
Отступы: сверху -5 (так как верхний блок имеет отступ в 10 пикс, у нас получится 5),
справа и слева - auto, получается выравнивание посередине и снизу 10 пикс.

#horizontal {
height:40px;
width:960px;
background:#000;
margin: -5px auto 10px auto;
padding:0;
}

2. Указываем стили для нашего меню.
Позиционирование - относительное, значит все элементы идут по порядку.
Z-index - слой самый верхний, то есть поверх всех остальных элементов.

ul.menu_up {
position:relative;
z-index:9999;
}

3. Стили для пунктов меню.
Выравнивание по левому краю, остальные элементы обтекают справа.
Отображается как блочный элемент, высотой 40 и шириной 140 пикселей.

ul.menu_up li {
float:left;
display:block;
height:40px;
width:120px;
}

4. Стили для ссылок.
Отображается как блочный элемент. Высота 28 пикс, отступ верх/низ = 6 пикс, слева/справа 8 пикс.
(Отступ верх + низ = 12px. Высота блока 28 пикс + 12 пикс = 40 пикселей. 
Отступ padding и высота складываются)
Подчёркивания ссылки - нет, шрифт - жирный, 12px, Tahoma.
Все буквы заглавные, цвет - серый.
Фон - изображение, не повторяется, позиция в блоке слева сверху.
(высота изображения которе буду использовать равна высоте блока)

ul.menu_up li a {
display:block;
height:28px;
padding:6px 8px;
text-decoration:none;
font:bold 12px Tahoma;
text-transform:uppercase;
color:#e0e0e0;
background: url('../images/li.png') no-repeat left top;
}

5. Стили для ссылки выбранного (текущего) пункта меню (имеет стандартный id="current").
Цвет шрифта - тёмно-серый.

ul.menu_up li#current a {
color:#888;
}

6.Стили для ссылок при наведении.
Фон меняется на другую картинку, цвет шрифта тоже меняется - становиться тёмным.

ul.menu_up li a:hover {
background: url('../images/li-h.png') no-repeat left top;
color:#121212;
}

Далее вложенные пункты:
7. Список вложенных пунктов, в обычном состоянии - скрыты.

li.parent ul{
float:left;
display:none;
}

8. Список вложенных пунктов, но при наведении.
Отображается как блочный элемент, поверх всех элементов, имеет серую рамку 5 пикс. 

li.parent:hover ul{
display: block;
z-index:9999;
border:5px solid #888;
}

9. Подпункты меню (вложенные) при наведении.
Обтекания - нет, элементы отображаются друг под другом.
Имеют ширину 150 пикс.

li.parent:hover ul li {
clear:both;
width:150px;
}

На этом всё!
Теперь посмотрим что получилось.

По дизайну конечно не самый лучший вариант, но для понятия принципа думаю достаточно.
Если у вас будет меньше пунктов, то можно увеличить ширину (width) пунктов, чтобы растянуть меню на всю ширину.
Так же если названия пунктов будут в одну строчку, то отцентрировать строки можно изменяя значение padding (не забывайте про общую высоту, так как padding входит в неё).

А теперь давайте сделаем какой нибудь пункт меню с другим оформлением.

Это может быть полезным когда нужно заострить внимание пользователей именно на таком пункте, например какое то коммерческое предложение или что то подобное.

Каждый пункт меню в Joomla имеет свой класс, точнее идентификатор (ID). Если посмотреть в Менеджере меню, то в крайней правой колонке указан ID для каждого пункта.
Например пункт Подробно о Joomla имеет ID 37.
Я хочу его выделить в меню, чтобы он сразу бросался в глаза.

Для этого нужно указать ему стиль, например сделать цвет шрифта ярко-оранжевым.
В нашем случае это будет так:

ul.menu_up li.item37 a{
color:#fe3801!important;
} 

Как расшифровать такую надпись?
Читать её надо с конца.

То есть,
для ссылки пункта меню с идентификатором 37 (.item37 - так Joomla указывает ID), который находится в меню с классом "menu_up" цвет шрифта будет #fe3801.
Так как до этого мы уже указывали цвет шрифта для ссылок, то нам нужно поставить слово !important.
Таким образом браузер будет понимать что это не ошибка, а важное свойство!
Что получилось:

Как и задумывалось. Вроде бросается в глаза.

На этом закончу разбор меню на CSS, думаю кому то это будет полезным!

Успехов!