6.8 Textbasierte Navigationsmenüs und Rollover-Effekte kombinieren

Problem

Eine Linkliste soll in Form eines eleganten Menüs dargestellt werden (siehe Abbildung 6-6).

Links mit Stil

Abbildung 6-6. Links mit Stil

Lösung

Zu Beginn legen Sie die Links als ungeordnete Liste an, die von einem div-Element umgeben wird, das seinerseits ein id-Attribut enthält:

<div id="navsite">
 <p>Navigationsmenü:</p>
 <ul>
  <li><a href="/">Startseite</a></li>
  <li><a href="/about/">über uns</a></li>
  <li><a href="/archives/">Archive</a></li>
  <li><a href="/writing/">Schreiben</a></li>
<li><a href="/speaking/">Sprechen</a></li>
  <li><a href="/contact/">Kontakt</a></li>
 </ul>
</div>

Der größte Teil ...

Get CSS Kochbuch now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial