Horizontal navigation bar (menu) with HTML & CSS

by danielkwood

HTML

<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>

CSS

body{
    margin: 0;
    min-height: 300px;
}

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

.menu{
    margin: 0;
    padding: 8px;
    height: 100%;
    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;
}