CSS / Diversos
Menu horizontal simples
enviado por Everton da Rosa
Este código cria um menu horizontal simples com efeito ao passar o mouse.
Para alterar os itens do menu, basta inserir, modificar ou excluir as linhas com a tag li na div id=menu.
Para alterar os itens do menu, basta inserir, modificar ou excluir as linhas com a tag li na div id=menu.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">
<head>
<title>Menu Horizontal</title>
<style type="text/css">
<!--
body {
padding:0px;
margin:0px;
}
#menu ul {
padding:0px;
margin:0px;
float: left;
width: 100%;
background-color:#EDEDED;
list-style:none;
font:80% Tahoma;
}
#menu ul li { display: inline; }
#menu ul li a {
background-color:#EDEDED;
color: #333;
text-decoration: none;
border-bottom:3px solid #EDEDED;
padding: 2px 10px;
float:left;
}
#menu ul li a:hover {
background-color:#D6D6D6;
color: #6D6D6D;
border-bottom:3px solid #EA0000;
}
-->
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Sobre</a></li>
<li><a href="">Artigos</a></li>
<li><a href="">Estudos</a></li>
<li><a href="">Diretório</a></li>
<li><a href="">CURSO</a></li>
<li><a href="">Links</a></li>
<li><a href="">Contato</a></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">
<head>
<title>Menu Horizontal</title>
<style type="text/css">
<!--
body {
padding:0px;
margin:0px;
}
#menu ul {
padding:0px;
margin:0px;
float: left;
width: 100%;
background-color:#EDEDED;
list-style:none;
font:80% Tahoma;
}
#menu ul li { display: inline; }
#menu ul li a {
background-color:#EDEDED;
color: #333;
text-decoration: none;
border-bottom:3px solid #EDEDED;
padding: 2px 10px;
float:left;
}
#menu ul li a:hover {
background-color:#D6D6D6;
color: #6D6D6D;
border-bottom:3px solid #EA0000;
}
-->
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Sobre</a></li>
<li><a href="">Artigos</a></li>
<li><a href="">Estudos</a></li>
<li><a href="">Diretório</a></li>
<li><a href="">CURSO</a></li>
<li><a href="">Links</a></li>
<li><a href="">Contato</a></li>
</ul>
</div>
</body>
</html>
Versão impressa gerada em
terça-feira, 21 de maio de 2013 em 14:23:16.
© Código Fonte