Joomla 1.5 - создание сайтов, верстка и программирование

Как же такое реализовать не применяя сторонних плагинов?

Да очень просто на самом деле...

Для начала определимся с типом меню, так как не каждый тип вывода позволяет создать многоуровневое меню. Наиболее удачным является тип меню Список а параметры начальный и последний уровень укажем 0 и 2 соответсвенно.

Теперь мы получили код ul-li-ul с которым и будем работать

<UL class="menu">
 <LI class="item60">
  <A href="http://joomla15.ru" mce_href="http://joomla15.ru"><SPAN>Главная</SPAN></A>
 </LI>
 <LI class="item53">
  <A href="/catalogue.html" mce_href="/catalogue.html"><SPAN>Каталог</SPAN></A>
 </LI>
 <LI class="item54">
  <A href="/contacts.html" mce_href="/contacts.html"><SPAN>Контакты</SPAN></A>
 </LI>
 <LI class="parent item58">
  <A href="/service.html" mce_href="/service.html"><SPAN>Услуги</SPAN></A>
  <UL>
   <LI class="item63">
    <A href="/service/service.html" mce_href="/service/service.html"><SPAN>Сервис</SPAN></A>
   </LI>
  </UL>
 </LI>
</UL>
 

 Так выглядит HTML код формируемый Joomla.

 ul.menu {
  position: absolute;
  top: 78px;
  left: 172px;
  list-style-type: none;
  padding:0;
  margin:0;
 
}
 ul.menu li {
  float: left;
  list-style-type: none;
  padding-left:10px;
  padding-right:10px;
  padding-bottom:0px;
  padding-top:0px;
  background-image: url(../images/menu_sep.gif);
  background-position: right top;
  background-repeat: no-repeat;
  position:relative;
}
 
 ul.menu a {
  display: block;
  height: 22px;
  padding: 0 10px;
  overflow: hidden;
  color: #7a7a7a;
  font-family:Grotic;
  font-style:bold;
  font-size: 11px;
  text-transform: uppercase;
  text-decoration:none;
  padding-top:3px;
}
ul.menu li.active a, ul.menu li a:hover {
  color:#E8A03D;
}
ul.menu li a, ul.menu li.active ul li a  {
  color:#7a7a7a;
}
 
ul.menu li ul {
display:none;
position:absolute;
top:2em;
left:0;
padding:0px 0px 7px;
margin:0px 0px 7px;
background-color:white;
opacity:0.75;
 
}
ul.menu li:hover ul {
display:block;
}
ul.menu li:hover ul li a{
height:auto;
}
 
 

А так CSS.

Впрочем это еще не все... нужно победить IE6, который как обычно что то да не понимает, в данном случае он не понимает свойство hover, так как оно применено не к тэгу <a>.

Пример описанного меню можно посмотреть тут.