１. HTML-Struktur

Wir beginnen mit einem einfachen HTML-Menü, das in einer Tabelle aufgebaut ist:

<!-- Tabelle mit 2 Pixel Zellabstand und einer Gesamtbreite von 13% -->
<table cellspacing="2" style="width: 13%">

<!-- Erste Zeile: Menüpunkt "Home" -->
<tr>
<td align="center">
<a href="" class="menu">Home</a> <!-- Link mit der CSS-Klasse "menu" -->
</td>
</tr>

<!-- Zweite Zeile: Menüpunkt "News" -->
<tr>
<td align="center">
<a href="" class="menu">News</a>
</td>
</tr>

<!-- Dritte Zeile: Menüpunkt "Kontakt" -->
<tr>
<td align="center">
<a href="" class="menu">Kontakt</a>
</td>
</tr>

<!-- Vierte Zeile: Menüpunkt "Credits" -->
<tr>
<td align="center">
<a href="" class="menu">Credits</a>
</td>
</tr>

</table>

♦ Was passiert hier? Und was kannst du ändern?
1. Menüpunkt: Home
Ein Link mit dem Text „Home“ wird in der ersten Zeile
der Tabelle zentriert dargestellt.
▸ Was kannst Du ändern?
Du kannst den Text z. B. durch „Startseite“ oder „Dashboard“ ersetzen.

2. Menüpunkt: News
Der zweite Link zeigt den Text „News“ an – unterhalb von „Home“.
▸ Was kannst Du ändern?
Ändere den Text z. B. in „Aktuelles“, „Blog“ oder „Neuigkeiten“.

3. Menüpunkt: Kontakt
Der dritte Link bietet den Menüpunkt „Kontakt“.
▸ Was kannst Du ändern?
Ersetze ihn z. B. durch „Support“, „Nachricht senden“ oder „Schreib mir“.

4. Menüpunkt: Credits
Ganz unten erscheint der Link „Credits“, also Hinweise auf Mitwirkende.
▸ Was kannst Du ändern?
Du kannst stattdessen „Impressum“, „Über mich“, „Team“ oder „Danksagung“ verwenden.

Tipp:
Du kannst jederzeit weitere Zeilen hinzufügen oder entfernen.
Achte darauf, dass Du für jede neue Zeile immer einen <tr> und <td>
Block verwendest, wie bei den vorhandenen Menüpunkten.

２. Die .box-Klasse (Layout des Containers)

Jetzt geben wir dem Menü das passende Aussehen mit CSS.

         		 /* Container-Box für das Menü – zentriert auf der Seite */
.box {
width: 13%; 		 /* Breite der Box – passend zur Tabelle */
margin: 0px auto 0 auto; /* Oben/und unten 0px Abstand, links/rechts auto = zentriert */
}

Was passiert hier?
▸ .box ist eine CSS-Klasse für einen umgebenden Block
    (z. B. <div class="box">).
▸ Mit dieser CSS-Klasse wird das Tabellenmenü mittig auf der Seite angezeigt.
▸ Die width: 13% sorgt dafür, dass die Box genau so breit ist wie die Tabelle
   (ebenfalls 13%).

Was kannst Du ändern?
▸ Breite anpassen:
Ändere 13% z. B. auf 20%, 300px oder auto, wenn Du mehr oder
weniger Platz brauchst.
▸ Abstand hinzufügen:
Wenn Du oben etwas Platz einfügen möchtest, kannst Du den oberen
margin-Wert anpassen.
→ Dann ändere z. B. margin: 40px auto 0 auto;
▸ Box für andere Inhalte verwenden:
Die .box-Klasse ist vielseitig. Du kannst sie auch für Texte, Bilder oder
andere Menüs nutzen.

Beispiel-Einsatz:

<!-- Container-Box für das Menü -->
<div class="box">
<!-- Menü kommt hier rein -->

<!-- Hinweis:
Wenn Du möchtest, dass das Menü weiter unten auf der Seite erscheint,
kannst du z. B. in der CSS-Klasse .box den oberen Abstand anpassen:
margin-top: 40px; (fügt z. B. 40 Pixel Abstand von oben hinzu)
-->
</div>

Warum ist das hilfreich?
Die .box-Klasse bestimmt, wo Dein Menü auf der Seite positioniert wird.
So kannst Du es einfach nach rechts oder unten verschieben, ohne den Menü-Inhalt selbst anzupassen.
Das ist besonders praktisch, wenn Du mit festen Layouts oder Seitenrändern arbeitest.

３. Die .menu-Klasse – Menü-Links im Normalzustand

Hier legst Du die Größe, Hintergrundfarbe, Schriftart und den Rahmen der Menü-Links fest:

/* Grundstil für die Menülinks */
a.menu {
display: block; 	/* Link als Blockelement – nimmt die volle Breite ein */
font-weight: bold; 	/* Fettschrift */
padding: 3px; 		/* Innenabstand zum Rand */
margin: 1px; 		/* Außenabstand zwischen den Links */
background: #251232; 	/* Dunkler violettbrauner Hintergrund */
color: #FFFFFF; 	/* Weißer Text */
font-size: 13px; 	/* Schriftgröße */
font-family: Georgia; 	/* Serifenschrift für klassischen Look */
font-style: italic; 	/* Kursivschrift */
text-transform: uppercase; /* Alle Buchstaben werden groß geschrieben */
text-decoration: none; 	   /* Keine Unterstreichung */
border: 1px solid #ebe7e8; /* Heller Rahmen */
}

Erklärung der CSS-Eigenschaften
▸ display: block; → Jeder Link wird als Block-Element dargestellt,
    wie ein Kasten mit voller Breite.
▸ font-weight: bold; → Der Text wird fett dargestellt.
▸ padding: 3px; → Innenabstand: Der Text hat 3 Pixel Abstand zum Rand.
▸ margin: 1px; → Außenabstand: Zwischen den einzelnen Links liegt
    1 Pixel Platz.
▸ background: #6b019b; → Violetter Hintergrundton.
▸ color: #FFFFFF; → Weißer Text.
▸ font-family: Georgia;→ Die Schriftart ist Georgia.
▸ font-style: italic; → Der Text ist kursiv gesetzt.
▸ text-transform: uppercase; → Der gesamte Text wird automatisch in
   Großbuchstaben dargestellt.
▸ text-decoration: none; → Der Standard-Unterstrich von Links wird entfernt.
▸ border: 1px solid #FFFFFF; → Weißer Rahmen mit 1 Pixel Stärke.

Das kannst du anpassen
▸ display:
block; macht den Link zum Blockelement (volle Breite).
Willst Du, dass der Link nur so breit wie der Text ist, ändere zu inline-block.
▸ font-weight:
bold; für fett. Alternativ normal oder lighter für weniger Betonung.
▸ padding:
Innenabstand rund um den Text. Größer oder kleiner machen den Abstand größer/kleiner.
▸ margin:
Abstand zwischen den Links. Erhöhe für mehr Platz.
▸ background:
Hintergrundfarbe passend zum Design.
▸ color:
Textfarbe zur Hervorhebung vom Text.
▸ font-size:
Schriftgröße beliebig anpassen.
▸ font-family:
Schriftart kann gegen andere ersetzt werden.
▸ font-style:
italic für kursiv. Entferne die Zeile für Standard.
▸ text-transform:
uppercase für Großbuchstaben. Entfernen für normale Groß-/Kleinschreibung.
▸ text-decoration:
none für keine Unterstreichung.
underline oder andere Werte für Unterstreichungen.
▸ border:
Rahmenfarbe, -stärke und -stil nach Wunsch anpassen oder entfernen.

４. Hover-Effekt – .menu:hover

Du kannst einen Hover-Effekt hinzufügen für die Akzentuierung eines Links beim Überfahren mit der Maus, ohne ihn zu anzuklicken.

/* Hover-Effekt beim Darüberfahren mit der Maus */
a.menu:hover {
display: block; 	/* Bleibt ein Blockelement */
padding: 5px; 		/* Etwas größerer Innenabstand beim Hover */
margin: 2px; 		/* Etwas größerer Außenabstand beim Hover */
background: #ac7ca9; 	/* Heller violetter Hintergrund beim Hover */
color: #000000; 	/* Schwarzer Text beim Hover */
font-size: 13px; 	/* Schriftgröße bleibt gleich */
text-transform: uppercase; /* Großbuchstaben bleiben erhalten */
text-decoration: none; 	   /* Weiterhin keine Unterstreichung */
border: 1px solid #ebe7e8; /* Heller Rahmen bleibt erhalten */
}

Das kannst du anpassen
▸ display:
Standard ist block. Möchtest Du, dass der Link nur so breit wie sein Inhalt ist, ändere auf inline-block.
▸ padding:
Vergrößere oder verkleinere den Innenabstand, um den Hover-Effekt stärker oder dezenter wirken zu lassen.
▸ margin:
Passe den Außenabstand an, um mehr oder weniger Abstand um den Link beim Hover zu schaffen.
▸ background:
Ändere die Hintergrundfarbe, z. B. in eine andere helle Farbe für den Hover-Zustand.
▸ color:
Wähle eine andere Textfarbe beim Hover, um den Kontrast oder das Design zu verändern.
▸ font-size:
Du kannst die Schriftgröße beim Hover anpassen, z. B. etwas vergrößern.
▸ text-transform:
Entferne oder ändere diese Eigenschaft, falls der Text beim Hover anders formatiert werden soll.
▸ text-decoration:
Du kannst z. B. underline setzen, damit Links beim Hover unterstrichen werden.
▸ border:
Passe Farbe, Stärke oder Stil des Rahmens an oder entferne ihn beim Hover ganz.

✦ Was passiert beim Überfahren mit der Maus?
▸ background: #e5abff; → Der Hintergrund wird hellviolett.
▸ color: #000000; → Der Text wird schwarz.
▸ padding: 5px; & margin: 2px; → Der Button vergrößert sich leicht,
    und hebt sich dadurch aktiv vom Rest ab.
▸ border: 1px solid #000000; → Der Rahmen wird schwarz statt weiß.
▸ Alle anderen Eigenschaften wie display, font-size, text-transform
    bleiben gleich und sorgen für ein einheitliches Verhalten.