Frage stellen
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:
Nummer2:
Hier noch der Code des CSS:
- Code: Alles auswählen
/****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
