Layout 3 Effekte

Jetzt noch einen schönen Mouse-Over-Effekt, und fertig ist das Menü. Mit ":hover" können wir etwas auslösen, wenn die Maus darüber schwebt. In dem Fall eine Hintergrundfarbe für die <a>.

Allerdings haben wir ein kleines Problem. Wenn wir mit der Maus über den Links schweben, wird der Hintergrund wie gewünscht geändert. Die Links sind aber rechteckig, und wir haben runde Ecken um das Menü. Dadurch schauen die farbigen Links dann über die Rundungen. Dies können wir verhindern, indem wir sagen, dass alles was über die Ränder hinaussteht nicht gezeigt werden soll (overflow). Dies schreiben wir somit an unser <ul>.

CodeZone

CSS

HTML

Auf Testzone anwenden