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
}