CSS menu creation

3

Hello,

Would you like to know the easiest way to create an HTML menu in CSS? I tried to make one here and it really did not work out.

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


    <meta charset="utf-8">
    <title>Clube Front-end!</title>
    <link rel="stylesheet" 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
}
    
asked by anonymous 07.05.2018 / 23:13

1 answer

1

I will answer here what I answered in the comment just so you can mark the question as resolved and it does not stay open on the site by going back to the list of unanswered questions ok. >

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

I'll give you a hint. Use some code editor that shows you this type of error. I just put your code in my editor (I use VS Code) which at the time I saw it had an open tag.

Running code 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>
    
07.05.2018 / 23:54