Navigation Bar Code

<!DOCTYPE html>


<html>
    <head>
        <title> Learning Navigation Bars </title>
        <style>
        body
        {
        margin: 0px;
        padding: 0px;
        }

        .nav
        {
        text-align: center;
        }

        .nav ul
        {
        width: 100%;
        height: 60px;
        background-color: grey;
        list-style: none;
        }

        .nav li
        {
        display: inline;
        }

        .nav a
        {
        color: white;
        margin-left: 65px;
        margin-right: 65px;
        font-size: 20px;
        text-decoration: none;
        line-height: 60px;
        display: inline-block;
        }

        .nav li:hover
        {
        background-color: #EE8822;
        padding-top: 23px;
        padding-bottom: 20px;
        }

        </style>
    </head>

    <body>

        <div class="nav">
        <ul>
            <li> <a href="#"> Home </a> </li>
            <li> <a href="#"> Web Design</a> </li>
            <li> <a href="#"> About Us </a> </li>
            <li> <a href="#"> Contact </a> </li>
        </ul>
        </div>

    </body>

</html>