creation of CSS menu

Asked

Viewed 96 times

3

Hello,

would you like to know the easiest way to create an HTML menu by CSS? I tried to make one here and it really didn’t work.

    <!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
}
html css menu
  • 1

    Dude what do you mean you didn’t? Asua tag <link rel="stylesheet" type="text/css" href="css/index.css" is missing an ">" at the end. Apart from this already appears a menu on the page... What exactly you need?

  • Thank you very much friend, I’m starting in the world of web development. I managed to solve my problem with your help, just missed really close the tag.

  • I’ll give you a hint. Use some code editor that shows you this type of error. It was only I color your code in my editor the VS Code that at the time I saw that had an open tag.... Always pay attention to the details, good luck there

1 answer

1


I will answer here what I answered in the comment just so you can mark the question as solved and it does not stay open on the site returning to list of unanswered questions okay.

Your tag <link rel="stylesheet" type="text/css" href="css/index.css" is open, at the end of it is missing a > in 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 the VS Code) that at the time I saw that it had an open tag.

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

Browser other questions tagged html css menu

You are not signed in. Login or sign up in order to post.