Menu Horizontal Simples
Posted by Tilo | Posted in XHTML & CSS | Posted on 27-02-2009
Tags:CSS, XHTML
0
Estava lendo um forum, e tinha uma dúvida sobre como fazer um menu horizontal com hover, então, fica a dica:
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!