HowTo: flächendeckende Links in Listen

Im folgenden Post verliere ich ein paar Zeilen CSS, die erläutern wie man einen Link innerhalb eines Listenelements dazu bewegt, auf der kompletten Fläche anklickbar zu sein. Ich gebe zu, dies ist nicht sonderlich schwer, da ich aber in den letzten Wochen mehrfach mit dieser Frage konfrontiert worden bin, möchte ich es einfach für die Nachwelt hinterlassen. „Wenn man etwas mehr als dreimal macht, sollte man es scripten“, in diesem Sinne lege ich mal das Post hier ab

Die Ausgangsituation beinhaltet eine Liste, die verschiedene Links mit sich trägt. Diese Methode hat sich für Navigationen spätestens mit WordPress durchgesetzt. Ein weiterer Nebeneffekt ist, dass Suchmaschinen diese Art von Architektur ganz gern annehmen (bitte keine SEO-Debatte, ich bin keiner!).
Hier also die Navigation [(X)HTML]

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Texte</a></li>
	<li><a href="#">Fotos</a></li>
	<li><a href="#">Zitate</a></li>
	<li><a href="#">Kontakt</a></li>
	<li><a href="#">Impressum</a></li>
</ul>

Theoretisch befindet sich die Navigation in einem DIV-Container. Der Liste kann wahlweise noch eine Klasse oder ein Idenfitier mitgegeben, ich werde es im Beispiel allerdings so belassen. Der Liste wird das Aufzählungszeichen entnommen und die Listenpunkte werden ausgerichtet.

ul {
	list-style-type: none;
}

ul li {
	float: left;
	width: 100px;
	height: 40px;
}

Bis zu diesem Punkt kommen alle ohne Hilfe. Der Knackpunkt ist den Link dazu zu bewegen, die komplette Fläche zu nutzen und nicht nur den angezeigten Text. Dies ist banaler als mancher denken mag. Ein Anker (Link) ist ein naturgemäß als Inline initialisiert. Und genau hier liegt der Schlüssel zum Erfolg. Teilt man dem Link mit, dass er als Block angezeigt werden soll und nimm dir allen Platz, den du bekommen kannst, ist das Rätsel bereits gelöst.

ul li a {
	width: 100%;
	height: 100%;
	display: block;
	background-color: #000;
	color: #fff;
	text-decoration: none;
}
ul li a:hover {
		width: 100%;
		height: 100%;
		display: block;
		background-color: pink;
 }

Eigentlich recht simpel. Heute morgen habe ich dieses Beispiel zur Veranschaulichung abgelegt. Wenn man es 1-2 Mal gemacht hat, vergisst man das auch nicht mehr. Ich denke auf die Deklarierung des :visited-Element brauche ich nicht eingehen oder?!