CodePen

See the Pen Waagrechtes_Navigationsmenue by Matthias Edler-Golla (@megolla) on CodePen.

HTML

<nav>
    <ul>
        <li><a href="punkt_1.html">Punkt 1</a></li>

        <!-- auf dieser Seite befindet man sich gerade -->
        <li class="current"><a href="punkt_2.html">Punkt 2</a></li>

        <li><a href="punkt_3.html">Punkt 3</a></li>
        <li><a href="punkt_4.html">Punkt 4</a></li>
        <li><a href="punkt_4.html">Punkt 5</a></li>
        <li><a href="punkt_4.html">Punkt 6</a></li>
    </ul>
</nav>

CSS

nav {
    background-color: #000;
    color: #fff;
}

/* Links im Navi-Menü */
nav a {
    color: #fff;
    text-decoration: none;

    /* ganz wichtig, sonst geht "padding" nicht!*/
    display: block;

    padding: 1em;
    border-left: 1px solid #ddd;
}

/* der ausgewählte Menüpunkt wird hervorgehoben */
nav li.current a {
    background-color: rgba(255,255,255,.4);
}

nav ul {
    list-style-type: none;

    display: grid;

    /* Kurzschreibweise für: grid-template-columns: 1fr 1fr 1fr 1fr 1f 1fr; */
    grid-template-columns: repeat(6, 1fr);
}

Demo

Demo eines waagrechten Menüs – schaut Euch den Source-Code an!

Download

Ihr könnt Euch das Beispiel auch herunterladen und damit in Brackets experimentieren…