Einfache Navigationsleiste mit 5 Links in HTML und CSS

Eine minimalistische Navigationsleiste mit 5 Links, die sich für einfache Webseiten eignet. Die Leiste ist horizontal angeordnet und reagiert auf Hover-Effekte.

Anmerkungen:

  • Diese Navigation ist responsive und passt sich der Breite des Bildschirms an.

  • Die Links ändern die Hintergrundfarbe beim Hovern.

  • Passe die Farben und den Text nach Belieben an.

				
					<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Navigation</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        nav {
            background-color: #333;
            overflow: hidden;
        }

        nav a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
        }

        nav a:hover {
            background-color: #555;
            color: white;
        }
    </style>
</head>
<body>

<nav>
    <a href="#home">Home</a>
    <a href="#about">Über uns</a>
    <a href="#services">Dienstleistungen</a>
    <a href="#blog">Blog</a>
    <a href="#contact">Kontakt</a>
</nav>

</body>
</html>