Código Fonte - O melhor conteúdo para programadores

Este código tem nota

Autor

Everton da Rosa

membro deste janeiro de 2007

Compartilhe e guarde

Enquete

Você acha que sucesso do Twitter é passageiro?

Sim, ele vai cair em desuso
Não, ele veio para ficar
Não sei
O que é Twitter?

Home Código Fonte CSS Diversos

Menu horizontal simples

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.

<?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>

<?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">

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

Este código foi útil para você?

Nota	Comentário
10	denunciar usertop comentou em 7/10/2009 Legal Muito bom bem organizado alinhado á corzinha bem abaixao dos botoes ficou maneiro toque especial
10	denunciar kennyhard comentou em 28/9/2009 Menu Horizontal Show! O código é muito bom mesmo, torna tudo muito simples. Mesmo um iniciante como eu pode fazer muita coisa de modo intuitivo com ele. Os menus são muito importantes num site ou blog. Estou agora trabalhando no meu! Muito obrigado - Kenny Hard Q. (SYOH Blo
10	denunciar sanches1 comentou em 18/5/2009 Menu Horizontal Nossa muito bom vlw

Regras:
Os comentários seguem as seguintes regras:

Todos os comentários são enviados por membros cadastrados no site.
A pontuação de comentários de conteúdo do próprio membro não serão computados.
Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
Há um limite de 10 comentários por dia para cada membro.
Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

Autenticação:	Apelido: Senha: (ainda não tem cadastro? clique aqui!)

Título:	Máximo de 30 caracteres
Comentário:	Máximo de 255 caracteres
Avaliação:

Equipe | Tabela de Pontos e Estrelas | Política de Privacidade | Mapa do Site | Fale Conosco

Autor

Everton da Rosa

Tags

CSS

JavaScript

Compartilhe e guarde

Enquete

Você acha que sucesso do Twitter é passageiro?

Menu horizontal simples

Legal

Menu Horizontal Show!

Menu Horizontal

Comente