html – CSS menu creation

Question:

Hi,

would like to know what is the easiest way to create a menu in HTML by CSS? I tried to make one here and it didn't really work.

    <!DOCTYPE html>
<html>
<head lang="pt-br">


    <meta charset="utf-8">
    <title>Clube Front-end!</title>
    <link type="text/css" href="css/index.css"


</head>

<body>
    <header>
            <h1><img  src="img/logo.png"></h1>

            <nav id="menu">
                <ul>
                    <li><a href=index.html>Home</a></li>
                    <li><a href="equipe">Equipe</a></li>
                    <li><a href="contato">Contato</a></li>
                    <li><a href="discord">Nosso Dicord</a></li>




                </ul>
            </nav>


            <h2>Clube Front-end é um site de cunho estudantil para unir pessoas que desenvolvem WEB seja como hobbie ou profissional! faça parte de nossa equipe e una-se a essa comunidade!</h2>
    </header>

    <div>

    <p>Bem vindo amigos, hoje vou escrever um pouco da minha aventura como desenvolvedor de WEB, hoje já faz uma semana que adiquiri um curso na <em>Udemy</em>, um grande curso desenvolvido pelo professor <i>André Fontenelle</i> que é um instrutor excelente.</p>
    </div>

</body>
</html>

and my CSS like this…

    body {
            background: black;
            font-family: cursive,sans-serif;
            color: white;

        }

h1 {
    text-align: center;
    }

h2 {
    text-align: center;
    }


title {
    text-align: center
    }

#menu ul li a {

    padding: 0px;
    margin: 0px;
    background-color: #EDEDED;
    list-style: none;
    display: inline;
    }

#menu ul li { display: inline; }

#menu ul li a {
    padding: 2px 10px;
    display: inline-block;

    /* visual do link */
    background-color: #EDEDED;
    color: #333;
    text-decoration: none;
    border-bottom: 3px solid #EDEDED


}

#menu ul li a:hover {
    background-color: #D6D6D6;
    color: #6D6D6D;
    border-bottom: 3px solid #EA0000
}

Answer:

I'll answer here what I answered in the comment just so you can mark the question as resolved and it doesn't stay open on the site going back to the list of unanswered questions ok.

Your <link rel="stylesheet" type="text/css" href="css/index.css" is open, at the end of it is missing a > at the end.

I take this opportunity to give you a tip. Use some code editor to show you this type of error. I just put your code in my editor (I use VS Code) and I saw that it had an open tag.

Code working below

 body {
            background: black;
            font-family: cursive,sans-serif;
            color: white;

        }

h1 {
    text-align: center;
    }

h2 {
    text-align: center;
    }


title {
    text-align: center
    }

#menu ul li a {

    padding: 0px;
    margin: 0px;
    background-color: #EDEDED;
    list-style: none;
    display: inline;
    }

#menu ul li { display: inline; }

#menu ul li a {
    padding: 2px 10px;
    display: inline-block;

    /* visual do link */
    background-color: #EDEDED;
    color: #333;
    text-decoration: none;
    border-bottom: 3px solid #EDEDED


}

#menu ul li a:hover {
    background-color: #D6D6D6;
    color: #6D6D6D;
    border-bottom: 3px solid #EA0000
}
<header>
            <h1><img  src="img/logo.png"></h1>

            <nav id="menu">
                <ul>
                    <li><a href=index.html>Home</a></li>
                    <li><a href="equipe">Equipe</a></li>
                    <li><a href="contato">Contato</a></li>
                    <li><a href="discord">Nosso Dicord</a></li>




                </ul>
            </nav>


            <h2>Clube Front-end é um site de cunho estudantil para unir pessoas que desenvolvem WEB seja como hobbie ou profissional! faça parte de nossa equipe e una-se a essa comunidade!</h2>
    </header>

    <div>

    <p>Bem vindo amigos, hoje vou escrever um pouco da minha aventura como desenvolvedor de WEB, hoje já faz uma semana que adiquiri um curso na <em>Udemy</em>, um grande curso desenvolvido pelo professor <i>André Fontenelle</i> que é um instrutor excelente.</p>
    </div>
Scroll to Top