<h1>CSS : Megamenu simples em css</h1>

Megamenus são menus popups que ao invés de links, são mostrados conteudos variados.
Hoje em dia está muito em voga esses menus, então vou mostrar aqui como criar rapidamente um megamenu.

Primeiramente, criamos um menu simples como:

Item 1
Item 2
Item 3

Agora, acrescentamos umas divs

Item 1

... conteudo 1 ...


Item 2

... conteudo 2 ... 


Item 3

... conteudo 3 ... 

Onde os conteudos oidem ser o que você quiser, inclusive outros menus, já que o megamenu é uma expansão da idéia de menu pop-up. Escrevemos agora o CSS

/* Deixa o menu na horizontal */
ul li { 
display: inline;
/* Um pouquinho de enfeites para melhor visualização */ 
padding: 5px;border: 1px solid;
}

/* Esconde o conteudo do menu */
ul li .menu-content {
display: none;
/* Um pouquinho de enfeites para melhor visualização */
padding: 5px;
border: 1px solid;
}

/* Mostra o conteudo sob o ponteiro do mouse */
ul li:hover .menu-content {
position:absolute;
display: block;
}

O essencial aqui é o 'position:absolute' da classe '.menu-content' sob o 'li:hover', pois doutra forma, o conteudo seria mostrado DENTRO do item de menu, alterando tamanho e bagunçando todo seu layout.

E assim a estrutura está totalmente pronta e funcional assim, agora basta aplicar algumas técnicas de css corriqueiras para deixar o menu conforme seu gosto.


Até a próxima.