The examples I’m going to use are from the Listamatic web site. http://css.maxdesign.com.au/listamatic/

This site is out of date, but in this case that’s a good thing. It means that our navigation will work in older versions of browsers. Navigation is essential to your site and you want to make sure that everyone can see it (one of the reasons I don’t recommend using CSS Grid to style navigation unless you have a fallback).

There will be a couple of things we will change in the HTML and CSS

HTML Changes

One thing we will change is the element used to wrap the navigation. They use a div, we will use a nav element. We will also add our class and roles to it. They use IDs which means that technically you can only have one navigation list on the page. We will change those to classes so they can be used more than once. 

HTML Code

You can use this code for even if you’re going to style your nav differently.

<nav class="navcontainer">
    <ul class="navlist">
        <li id="active"><a href="#" class="current">Item one</a></li>
        <li><a href="#">Item two</a></li>
        <li><a href="#">Item three</a></li>
        <li><a href="#">Item four</a></li>
        <li><a href="#">Item five</a></li>
    </ul>
</nav>

EXAMPLE 1: Simple Horizontal navigation

The first example is just making the list stretch vertically across the page with no bullet points. [original listamatic page]

.navlist li
{
    display: inline; /* brings nav elements up next to each other */
    list-style-type: none; /* removes the bullet points */
    padding-right: 20px; /* spaces them out from each other. Adjust to suit your needs */
}

Here is an example on CodePen

See the Pen Simple Horizontal Navigation by Christopher Stein (@profstein) on CodePen.