Web
Menu horizontal com CSS
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.