CSS - Menu fixo

<html lang="pt-br">
    <head>
        <head>
            <meta charset="utf-8">
            <title>Menu fixo com CSS</title>
            <style>
                body{
                    margin: 0;
                }

                main {
                    padding: 20px;
                    margin-top: 30px;
                }

                .menu {
                    position: fixed;
                    top: 0px;
                    left: 0px;
                    width: 100%;
                    background-color: black;
                }

                .menu a {
                    font-size: 24px;
                    text-decoration: none;
                    display: block;
                    float: left;
                    width: 100px;
                    padding: 14px 20px;
                    color: white;
                    background-color: black;
                }

                .menu a:hover {
                    color: black;
                    background-color: white;
                }
            </style>
        </head>
    </head>
    <body>
        <nav class="menu">
            <a href="#">Inicial</a>
            <a href="#">Sobre</a>
            <a href="#">Contato</a>
        </nav>
        <main>
            <script>
                for (var i=1; i<=30; i++)
                    document.write("<p>Parágrafo "+i+"</p>")
            </script>
        </main>
    </body>
</html>