вариант 1 (универсальный): найти ПРОСТОЙ бесплатный шаблон в котором это работает и посмотреть как это сделано
вариант 2:
а) каждый кнопишь меню должен иметь свой уникальный ID для его поиска, обращения к нему, и операций над ним. также указать каждому элементу меню class CSS который будет описывать правила его отображения. для первого уровня меню свой класс, для элементов выпадающего меню свой класс и тп.
б) необходимо добавить в файл темплейта index.php HTML секцию js скрипта в котором описать функции реализующие визуальные эффекты ниспадающего меню
неполный пример: <script type="text/javascript">
function onMouseOver(id) {
// код на Js реализующий показ подменю
var qq1 = document.getElementById(id);
qq1.style.display="block";
return true; }
function onMouseOut(id) {
// код на Js прячущий подменю
var qq1 = document.getElementById(id);
qq1.style.display="none";
return true; }
</script>
в) добавить описание всех элементов меню (видимые и выпадающие) в CSS файл. для элементов выпадающего меню по умолчанию свойство display установить в "none" (невидимые)
г) добавить в шаблон переопределение вывода модуля меню Joomla внедрив в него вызов функций из пункта б) на события MouseOver MouseOut и тп над элементами пункта меню. для этого создать в темплейте директорию HTML, затем скопировать в нее файлы из самой Joomla \modules\mod_menu\.. и скопированные в темплейт файлы отредактировать.
(переопределение вывода модулей реализовано в стандартных темплейтах Joomla atomic, beez5, beez_20)
просьба не воспринимать данное руководство дословно а использовать как направление для дальнейших изысканий! все написано о памяти и без проверки на практике, наверняка содержит ошибки легко исправимые при практической реализации.
метод не претендует на идеальное решение - вариант где копать для того у кого "Опыт в php, CSS и HTML есть." а подобные вопросы возникают 