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 O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.