Liebe Community,
erstmal möchte ich hallo sagen, da ich neu bin.
Der Grund wieso ich hierher gefunden habe liegt klar auf der Hand, ich habe ein Problem mit CSS und hoffe das mir hier jemand helfen kann.
Das Problem ist, das ich eine Navi habe, welche eine Liste mit Bildern ist.
HTML:
HTML-Code:
<ul class="nav">
<li class="home"><a href='#'></a></li>
<li class="3st"><a href='#'></a></li>
<li class="com"><a href='#'></a></li>
<li class="media"><a href='#'></a></li>
<li class="mitglied"><a href='#'></a></li>
<li class="kontakt"><a href='#'></a></li>
<li class="help"><a href='#'></a></li>
</ul>
CSS:
Code:
/* NAVIGATION */
.nav {
list-style-type:none;
margin:0;
padding:0;
width: 1112px;
height: 60px;
display: block;
}
.nav li a {
display: block;
background:#000 url(Bilder/navbar.png) 0 0;
}
/* */
.home a {
width: 128px;
height: 60px;
background-position: 0 0;
}
.home a:hover {
width: 128px;
height: 60px;
background-position: 0 -60px;
}
.3st a {
width: 217px;
height: 60px;
background-position: 128px 0;
}
.3st a:hover {
width: 217px;
height: 60px;
background-position: 128px -60px;
}
.com a {
width: 184px;
height: 60px;
background-position: 217px -60px;
}
.com a:hover {
width: 184px;
height: 60px;
background-position: 0 0;
}
.media a {
width: 119px;
height: 60px;
background-position: 0 0;
}
.media a:hover {
width: 119px;
height: 60px;
background-position: 0 0;
}
.mitglied a {
width: 248px;
height: 60px;
background-position: 0 0;
}
.mitglied a:hover {
width: 248px;
height: 60px;
background-position: 0 0;
}
.kontakt a {
width: 140px;
height: 60px;
background-position: 0 0;
}
.kontakt a:hover {
width: 140px;
height: 60px;
background-position: 0 0;
}
.help a {
width: 76px;
height: 60px;
background-position: 0 0;
}
.help a:hover {
width: 76px;
height: 60px;
background-position: 0 0;
}
So das sind erstmal die Codes. Genauer: ich möchte das die Navigation horizontal ist, die Bilder beim hovern eine andere Background-Position besitzen und ein Dropdown menü erscheint. Das mit dem Dropdown menü bekomme ich noch selber hin, ich finde aber den Fehler nicht beim Hovern des Menüs. Background positionen stehen im Moment auf 0, sie standen vorher eigl. in richtiger Position. Dennoch das Bild war dann verschoben.
Ich bitte um Hilfe.
MfG
mLa
P.S.: Link zum anschauen:
<? echo PAGETITLE; ?>