Also. Dies ist mein zweiter Versuch jemandem zu helfen, also nicht hauen, wenns falsch ist.
Erstmal solltest du dir den Code deiner Liste anschauen:
Code:
<ul>
<li>erster Link 01
<li>zweiter Link 01
<li>dritter Link 01
<li>vierter Link 01
</ul>
Du öffneste da dreimal das li-Tag aber schließt es keinmal. li ist ein ganz normales Tag wie auch p oder h1. Nachem der Inhalt drin ist kommt eine Beendigung dahinter, also: </li>
Jetzt das CSS:
Was du dir da zusammen kochst ist eine Div-Suppe!
Das solltest du dir gleich zu anfang abgewöhnen. Im Klartext heißt das, dass du einen Div-Container um ein anderes Element legst um dessen Design-Eigenschaften zu definieren.
In deinem Fall hast du einen Div mit der Klasse "liste" um eine ul-Liste gelegt. Das geht eleganter!
Du kannst im CSS direkt sagen, ohne id, oder class, dass eine ul die und die Eigenschaft haben soll. Das sieht dann in deinem Beispiel so aus:
Code:
div#navigation ul {
~stylisches Design~
}
Sonstige Probleme:
Jetzt gibst du dem li Tag mal ein display:block; mit, damit der unterschiedliche Abstand nach links verschwindet. Also so:
Code:
div#navigation ul li {
display:block;
~restliches stylisches Design~
}
Ob das jetzt auch was mit der unterschiedlichen Schriftgröße zu tun hat, weiß ich nicht. Wenn sich nach dem display:block; dabei nichts änders versuchs mal mit einer festen Höhe.
MouseOver Effekte sind ganz einfach:
Code:
div#navigation ul li a:hover {
~stylisches Design~
}
Und fertig.
Wenn ich noch Zeit finde, bastel ich dir das mal fertig, aber ich kann für nichts garantieren.
Hoffe geholfen zu haben.
