Menu Horizontal Simples

Estava lendo um forum, e tinha uma dúvida sobre como fazer um menu horizontal com hover, então, fica a dica:

Link do Exemplo:

CSS do Exemplo:

* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}

ul {
margin: 0 auto;
width: 500px;
border: solid 1px #000000;
height: 30px;
}

ul li {
float: left;
}

ul li a {
line-height: 30px;
text-align: center;
display: block;
width: 100px;
background-color: #333333;
color: #CCCCCC;
font-family: 'tahoma';
font-size: 12px;
}

ul li a:hover {
background-color: #666666;
color: #FFFFFF;
}

HTML do exemplo:

<ul>
<li><a href="#a">Item 1</a></li>
<li><a href="#a">Item 2</a></li>
<li><a href="#a">Item 3</a></li>
<li><a href="#a">Item 4</a></li>
<li><a href="#a">Item 5</a></li>
</ul>

Espero ter Ajudado!

Leia Também:

About Tilo

Profissional FrontEnd desde 2006, Executa trabalhos com xHtml, CSS, JavaScript, MySQL e PHP, estudante de C# e SQL. Cursa Tec. em Analise e Desenvolvimento de Sistemas na UniItalo.
This entry was posted in XHTML & CSS and tagged , . Bookmark the permalink.

Deixe um Comentário

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree