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

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

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

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

Теперь мы получили код 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>.

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