Выпадающее CSS меню без использования JS - Joomla 2.5: Шаблоны, разметка и макеты вывода

div#topmenu ul  {
margin: 0px;
padding: 0px;
list-style: none;
 float: left;
 display:block;}

div#topmenu ul li{
 list-style:none;
 float:left;
 height:100%;
 position:relative;
 display:block;
 padding:0;
 margin:0; }

div#topmenu ul li a{
 display:block;
 padding:0 15px;
 margin:0;
 line-height:22px;
 color:#646464;
 text-decoration:none;
 font-size:10px;
font-weight:normal;
 text-shadow: #fff 0 1px;}

div#topmenu ul li.active a{
background:#666 ;
 -moz-border-radius: 5px;
 border-radius: 5px;
 font-size:12px; 
color:#fff;
 text-shadow: #666 0 1px;}

div#topmenu ul li a:hover{
display:block;
 text-decoration:none;
 font-weight:normal;
 font-size:12px;
 background:#666 ;
 -moz-border-radius: 5px;
 border-radius: 5px;
 color:#fff;
 text-shadow: #666 0 1px;
 z-index:7;}

div#topmenu ul li ul {
position:absolute;
width:180px;
left:180px;
border-top:0;
 margin:0;
 padding:0;
 display:none;}

div#topmenu ul li :hover ul {
display:block;
/*left:0;*/
z-index:3;}

div#topmenu ul li ul li{
padding:0;
height:auto;
width:180px;
 margin:0 auto;
 border:none;
 text-align: left;
 display:block;}

div#topmenu ul li:hover ul li a {text-shadow:none;}

div#topmenu ul li:hover ul li { background:none; display:none;}

div#topmenu ul li:hover ul li:hover ul{display:block; z-index:4;}

div#topmenu ul li:hover ul li a, #topmenu ul li ul li a, #topmenu ul li.active ul li a{
margin:0;
 padding:0 0 0 10px;
height:22px;
line-height:22px;
 background:#555;
border-bottom:1px solid #3a3a3a;
color:#d1d1d1;
 font-size:10px;
font-weight:normal;
text-shadow:none;
 -moz-border-radius: 0px;
 border-radius: 0px;
 display:block;}

#topmenu ul li ul li a:hover, #topmenu ul li ul li.active a, #topmenu ul li.active ul li a:hover, #topmenu ul li.active ul li.active a {
margin:0;
 padding:0 0 0 10px;
height:22px;
line-height:22px;
background:#343434;
color:#fff;
 font-size:11px;
text-shadow:none;}