Um dos pontos importantes de nosso site de pré-lançamento é o menu horizontal.
Fizemos tal menu utilizando somente CSS. Gostaríamos de dar um simples exemplo de como fazer um menu horizontal utilizando CSS.
Arquivo CSS:
#menu {
display: table;
background-image: url(/images/menu.gif);
background-repeat: no-repeat;
width: 628px;
text-align: left;
margin:0 auto;
position:relative;
height: 24px;
}
#menu ul {list-style:none;}
#menu ul li {display:inline}
#menu ul li a {
font: 10px Verdana, Arial,tahoma, sans-serif;
color: white;
text-decoration: none;
padding:5px 15px 10px 15px;
background-image: url(/images/background_menu.jpg);
background-repeat: repeat-X;
height:24px;
margin-left: 12px;
margin-right: 12px;
letter-spacing: 1px;
}
#menu ul li a:hover {
background-image: url(/images/background_menu_hover.jpg);
background-repeat: repeat-X;
height: 24px;
}
Arquivo HTML:
Qualquer dúvida ou sugestão, comente esse post.
