Опять же про горизонтальный меню! - Joomla 2.5: Шаблоны, разметка и макеты вывода

/* begin MenuItem */
.top-menu a
{
  position: relative;
  display: block;
  overflow: hidden;
  width: 200px;
  height: 80px;
  cursor: pointer;
  text-decoration: none;
  }


.top-menu ul li
{
    margin:0;
    clear: both;
}


.top-menu a .r, .art-menu a .l
{
  position: absolute;
  display: block;
  top: 0;
  z-index: -1;
  width: 300px;
  height: 90px;
  background-image: url('../images/menuitem.png');
}

.top-menu a .l
{
  left: 0;
  right: 6px;
}

.top-menu a .r
{
  width: 412px;
  right: 0;
  clip: rect(auto, auto, auto, 406px);
}

.top-menu a .t, .top-menu ul a, .top-menu a, .top-menu a:link, .top-menu a:visited, .top-menu a:hover
{
  text-align: left;
  text-decoration: none;
}

.top-menu a .t
{
  color: #C9D9D9;
  padding: 0 3px;
  margin: 0 6px;
  line-height: 25px;
  text-align: center;
}

.top-menu a:hover .l, .art-menu a:hover .r
{
  top: -30px;
}

.top-menu li:hover>a .l, .art-menu li:hover>a .r
{
  top: -30px;
}

.art-menu li:hover a .l, .art-menu li:hover a .r
{
  top: -30px;
}
.top-menu a:hover .t
{
  color: #151E1E;
}

.top-menu li:hover a .t
{
  color: #151E1E;
}

.top-menu li:hover>a .t
{
  color: #151E1E;
}


.top-menu a.active .l, .art-menu a.active .r
{
  top: -60px;
}

.top-menu a.active .t
{
  color: #151E1E;
}


.top-menu a:hover.separator-without-submenu 
{
  cursor: default;
}

.top-menu a:hover.separator-without-submenu .t
{
  color: #C9D9D9;
}

.top ! !-menu li:hover a.separator-without-submenu .t
{
  color: #C9D9D9;
}

a:hover.separator-without-submenu .r, a:hover.separator-without-submenu .l 
{
  top: 0 !important;
}
/* end MenuItem */