Creating a navbar with HTML and CSS

This tutorial explains how to add a horizontal navigation bar (menu) with buttons to a webpage using HTML and CSS code. The menu will look like the one shown below (with buttons changing colour when the mouse hovers over), but you can customise the font, colours, etc.

Example menu
Example menu

Please watch the video below and then scroll down to view the sample code.

Here is the sample HTML code:

<html>
    <head>
        <title>Creating a navbar</title>
        <link rel="stylesheet" href="theme.css" type="text/css"/>
    </head>

    <body>
        <nav>
            <ul class="menu">
                <li><a class="button" href="index.html">Home</a></li>
                <li><a class="button" href="about.html">About</a></li>
                <li><a class="button" href="contact.html">Contact Us</a></li>
            </ul>
        </nav>
    </body>
</html>

And here is the sample CSS code:

body{
    margin: 0;
}

nav{
    width: 100%;
    float: left;
}

.menu{
    margin: 0;
    padding: 8px;
    height: 17px;
    background-color: #334a94;
}

.menu li{
    display: inline;
}

.button{
    font-family: Arial;
    font-size: 1em;
    font-style: none;
    color: #ffffff;
    padding: 8px;
    text-decoration: none;
}

.button:link{
    background-color: #334a94;
    color: #ffffff;
}

.button:hover{
    background-color: #786ed4;
}