Fazer menus com CSS é relativamente simples. Não precisamos de muitas linhas de código para fazer um menu totalmente personalizado. O Menu da Livraria Cultura é feito com Tabela. Na verdade, todo o site deles é feito com Tabelas, mas esse é outro assunto.
Você pode ver o menu deles aqui.
O Código HTML do menu deles é:
Eu não encontrei qual seria o pedaço do CSS referente ao menu, por isso eu não vou colar aqui.
O problema da versão do menu deles é que é todo feito com imagens e usa muita tabela. Há também código CSS inline. Isso prejudica leitores de tela, prejudica Google, e manutenção.
A versão que sugerimos é feita utilizando a técnica Image-Replacement. Segue abaixo o código HTML:
Abaixo o Código CSS:
Veja o resultado do menu reconstruído aqui.
O Submenu na versão original, eu fiz utilizando apenas CSS. Testei em Firefox e IE7/8. Funciona que é uma beleza. Sem Javascript, sem JQuery, nem nada.
Se o IE7 já conhecesse seletores complexos, não precisaríamos resetar todos os links dos submenus como fizemos na linha 35.
O Código CSS, embora pareça longo, ele está organizado para ser fácil de adicionar outros elementos.
Sempre que escrever um CSS, pense sempre no futuro. Um CSS para resolver um problema imediato, normalmente tem menos código. Mas ele resolve apenas aquele problema específico. Se você fizer um CSS abrangente e pensando no futuro, seu código fatalmente vai ficar maior. Mas você terá menos retrabalho ao fazer as alterações futuras. Eu prefiro.
Pegue aqui os dois códigos para estudar: Reconstrução Menu Livraria Cultura
