Нужна помощь по меню

Пишу сайт на joomla. Скачал шаблон, поставил, начал делать верхнее меню и тут пошёл бред...вот тут видно, что элементы верхнего меню в картинках, при навидении курсора картинка меняется. У меня же эти элементы без картинок, выровнены вплотную к краенему левому краю и эти надписи слеплены друг с другом, а при наведении на какую-нибудь ссылку эта надпись исчезает и между ссылками появляются отступы и выранкивается не вплотную к краю. Жуткая картина....Картинки лежат там где надо, CSS вроде в норме. Вот не пойму в чём проблема. Помогите плиз)))

 

Код CSS

Code:

/* Formatvorlagen für die Navigation-Oben */ 
  ul#mainlevel-nav {  	
list-style : none;  	
padding : 0;  	
margin : 0;  	
font-size : 11px;  	
padding-left: 20px;  
}  
  ul#mainlevel-nav li {  	
background-image : url(../images/navi.jpg);  	background-repeat : repeat-x;  	
color : #fff;  	
font-weight : bold;  	
float : left;  	
margin : 0;  	
padding : 0;  	
font-size : 11px;  	
height : 65px;  	
line-height : 35px;  	
white-space : nowrap;  	
border-right : 5px solid #000; 
 }  
  ul#mainlevel-nav li a {  	
text-align : center;  	
font-weight : bold;  	
font-size : 11px;  	
display : block;  	
padding-left : 20px;  	
padding-right : 20px;  	
text-decoration : none;  	
color : #ffffff;  	
background : transparent;  	
padding-top: 10px;  
}  
  #buttons > ul#mainlevel-nav li a {  	
width : auto;  }  
  ul#mainlevel-nav li a:hover {  	
background-image : url(../images/navi_hover.jpg);  	background-repeat : repeat-x;  	
background-position: center top;  	
color : #000;  	
font-weight : bold;  	
padding-left : 20px;  	
padding-right : 20px;  
float : left;  	
margin : 0;  	
font-size : 11px;  	
white-space : nowrap;  	
height : 65px;  	
line-height : 35px;  	
margin-top: 10px;  
}