-Hideki • 17.11.13 15:19![[Menu] Horizontal com HTML + CSS Empty](https://2img.net/i/empty.gif)
[Menu] Horizontal com HTML + CSS 17.11.13 15:19
Olá Convidado.
Para Começar crie um documento com o nome: index.html e insira esse código:
- Código:
<!DOCTYPE html>
<html>
<head>
<title>Menu Horizontal - HTML+CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--- Menu - Começo-->
<div class='menu'>
<ul>
<li><a href='#' class='selecionado'>Home</a></li>
<li><a href='#'>Editar</a></li>
<li><a href='#'>Editar</a></li>
<li><a href='#'>Editar</a></li>
</ul>
</div>
<!--- Menu - Fim-->
</body>
- Código:
.menu
{
margin:20px auto;
position : relative;
width: 100%;
height: 43px;
background: #FFFFFF;
font-weight: bold;
text-align:center;
}
.menu li
{
margin:2px 0 0 0;
float:left;
list-style-type: none;
}
.menu li a
{
color: #777;
text-decoration: none;
float: left;
padding: 10px 20px 10px 20px;
}
.menu li a:hover
{
color: #ffcc00;
font-weight:bolder;
}
.menu li a.selecionado
{
color: #FFFFFF;
background: #CCCCCC;
padding: 10px 20px 10px 20px;
}
.menu ul
{
margin-left:auto;
margin-right:auto;
margin-top:0;
display:table;
}
