Ola Amigo.
Só para lembrar que o que está atrás do texto do menu pode ser também uma imagem.
Neste caso você terá de aprender a mexer com css.
Propriedades tais como:
display, margin e padding,.
Vai estudando isso que você conseguira fazer um menu bem melhor.
Pega isto e vê se lhe ajudei.
Obs: Não usei nenhuma imagem, só css.
<html>
<head>
<title>Separador_de_menu</title>
</head>
<style type="text/css">
/*O teu efeito começa aqui*/
ul li {
list-style:none;
display:inline;
background:#CCCCCC;
float:left;
margin-left:1px;
}
/*O teu efeito termina aqui*/
/*Tirar a decoração do link*/
li a{text-decoration:none}
/*Tirar a decoração do link fim*/
/*Passe o mouse no link e ele aumenta o tamanho do texto*/
li:hover {
background:#0099FF;font-size:30px;display:block;
}
/*Passe o mouse no link e ele aumenta o tamanho do texto fim*/
</style>
<body>
<!--Menu inicio -->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Culinaria</a></li>
<li><a href="#">Receitas</a></li>
<li><a href="#">Saude</a></li>
</ul>
<!--Menu fim -->
</body>
</html>
Qualquer duvida é só postar.
menu.jpg 56.86KB
7 downloads
