XHTMLforum - Problem mit Navigation

Hallo Läute,
Ich erstelle momentan eine Website, doch habe mit meiner Navigation Probleme.
Das Problem liegt anbei das sich die Navigation überlappt und man so nicht schön switchen kann.
Wichtig: Das ganze läuft auf einem CMS (Joomla 1.5)

Bilder für die Verständlichkeit:
Nummer1:
http://img151.imageshack.us/img151/874/erklrung.png

Nummer2:
http://img218.imageshack.us/img218/5837/erklrung2.png

Hier noch der Code des CSS:

Code:

/****topmenu*****/

#menu {

float:left;

width:950px;

height:45px;

margin-top:35px;

background:transparent;



}



#navigation {

float:left;

height: 45px;

text-align:center;

z-index: 50;

background:transparent;

width:730px;



}



#navigation a {

float:left;

display: block;

height: 45px;

padding: 15px 15px 0 15px;

font-weight:bold;

color:#000 ;

font-size:14px;

text-transform:uppercase;



}



#navigation  a:hover{

color:#4aa6c0;



}



#navigation ul {

list-style: none;

margin: 0 4px 0 4px;

padding-top: 0px ;

display: block;



}



#navigation li {

display: block;

float: left;

margin:0;



}



#navigation li.active {

height:55px !important;

background: url(../images/menu_active_02.png) no-repeat 100% 0 ;

margin-top:0 !important;



}



#navigation li.active span {

height:55px !important;

background: url(../images/menu_active_01.png) no-repeat 100% 0 ;

margin-top:0 !important;



}



#navigation li.active a {

color:#000 ;

height:55px !important;

background: url(../images/menu_active_01.png) no-repeat 0 0 ;

margin-left:-10px;

margin-top:0 !important;

line-height:30px;



}



#navigation li {

height:45px !important;

background: url(../images/menu_02.png) no-repeat 100% 0 ;

margin:10px 8px 0 8px;



}



#navigation li span {

height:45px !important;

background: url(../images/menu_01.png) no-repeat 100% 0 ;



}



#navigation li a {

color:#000 ;

height:45px !important;

background: url(../images/menu_01.png) no-repeat 0 0 ;

margin-left:-10px;



}



#navigation li li {

height:40px !important;



}



#navigation li li a {

font-size: 12px;

padding:10px 0 0 0 !important;

margin: 0 !important;

color:#454545 !important;

border:none;

height:40px !important;



}



#navigation li li a:hover{

color:#4aa6c0 !important;



}



#navigation li.active li a {

line-height:10px !important;

height:25px !important;



}



.nav, .nav * {

margin:0;

padding:0;



}



.nav {

float:left;

z-index:500 !important;



}



.nav ul {

background:#fbfafa; 

z-index:500 !important;

width:196px !important;



}



.nav li {

float:left;

list-style:none; 

background:none;

z-index:900;

position:relative;



}



 .nav li li a {

text-decoration:none;

background: none;

float:none;

width:180px !important;

border-bottom:1px dashed #d0cdcd !important;

margin:0 5px 0 0 !important;





} 



.nav li li  {

line-height:38px;



} 



#navigation li:hover li,

#navigatin li.sfHover li,

#navigation li.active:hover li,

#navigation li.active.sfHover li,

#navigation li:hover li span,

#navigation li.sfHover li span {

background-image: none;



}



#navigation li:hover li a,

#navigation li.sfHover li a,

#navigation li.active:hover li a,

#navigation li.active.sfHover li a {

background-image: none;



}



.nav li ul {

float:none;

left:-999em;

position:absolute;

width: 180px;



}



.nav li:hover ul,

.nav li.sfHover ul {

left:-13px;

top: 45px;

z-index:100;



}



.navli:hover li ul,

.nav li.sfHover li ul,

.nav li li:hover li ul,

.nav li li.sfHover li ul,

.nav li li li:hover li ul,

.nav li li li.sfHover li ul {

top:-999em;

z-index:100;



}



.nav li li:hover ul,

.nav li li.sfHover ul,

.nav li li li:hover ul,

.nav li li li.sfHover ul,

.nav li li li li:hover ul,

.nav li li li li.sfHover ul {

left: 177px;

top:0px;

width: 180px;



}



.nav li li {

position: relative;

float:none;

width: 180px;



}

Wie krieg ich das schön hin? Bereits jetzt besten Dank.

Gruss safari