Micox Ultimate Drop Down Menu
Depois de mil anos sumido...
Ae criançada, o bozo chegou.
Hou, seguinte, vocês me ajudam a testar este esquema de menu drop down abaixo??
Vamos contribuir com a paz mundial ajudando as pessoas a não ficarem mais nervosas quando forem fazer menus. O nobre colega micox já doou 8 horas do seu precioso tempo contribuindo com esta causa noblíssima (aumentativo de "nobre" haheaeh).
Contribua você também para contruirmos um mundo mais feliz.
/ menu horizontal-vertical até 4 níveis by elmicox.blogspot.com /
.menu-hv { position: relative; margin: 0; padding: 0; }
.menu-hv:after { content: "."; line-height: 0px; clear: both; display: block; visibility: hidden; }
.menu-hv * { margin: 0; padding: 0; list-style: none;}
.menu-hv li { position: relative; float: left; line-height: 1.2em; }
.menu-hv a { display: block; zoom: 1; line-height: 1.2em; }
.menu-hv li ul { position: absolute; visibility: hidden; }
.menu-hv li ul li { float: none; }
.menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }
.menu-hv li:hover ul { visibility: visible; }
.menu-hv li:hover ul ul { visibility: hidden; }
.menu-hv li li:hover ul { visibility: visible; }
.menu-hv li li:hover ul ul { visibility: hidden; }
.menu-hv li li li:hover ul { visibility: visible; }
/ defina a largura dos itens do seu menu abaixo /
.menu-hv li { width: 100px; }
/ menu vertical-vertical até 4 níveis by elmicox.blogspot.com /
.menu-vv { position: relative; margin: 0; padding: 0; float: left; }
.menu-vv:after { content: "."; line-height: 0px; clear: both; display: block; visibility: hidden; }
.menu-vv * { margin: 0; padding: 0; list-style: none;}
.menu-vv li { position: relative; line-height: 1.2em; }
.menu-vv a { display: block; zoom: 1; line-height: 1.2em; }
.menu-vv li ul { position: absolute; left: 100%; top: 0; visibility: hidden; }
.menu-vv li:hover ul { visibility: visible; }
.menu-vv li:hover ul ul { visibility: hidden; }
.menu-vv li li:hover ul { visibility: visible; }
.menu-vv li li:hover ul ul { visibility: hidden; }
.menu-vv li li li:hover ul { visibility: visible; }
/ defina a largura dos itens do seu menu abaixo /
.menu-vv li { width: 100px; }
/*
para ativar o pseudo elemento :hover no IE6- use:
- Behaviors htc como indicado aqui : http://revolucao.etc.br/archives/falso-hover-no-internet-explorer/
- Ou o script IE7/IE8 do dean edwards: http://dean.edwards.name/IE7/
*/
Pra testar é fácil, é só colocar ele em alguma página sua onde tenha um menu drop down e aplicar a classe menu-hv ou menu-vv ao invés do esquema atual que esteja usando. É rapidim e não dói nada, eu prometo.
Sim, eu sei que dá pra juntar um monte de declaração aí mas faço isso depois. No momento preciso das duas classes separadas mesmo pra testar e ir debugando quando der problemas.
Por favor ajudem testando no IE7 e Opera.
Se você já passou por este problema, sabe do boró que é. Vamos ajudar a simplificar este problema. Você mesmo pode ser beneficiado no futuro. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif
helpaeeee
PS.: ñao se esqueça de adicionar um dos truques pra ativar o hover no IE ok?
ou o http://dean.edwards.name/IE7/
<!--[if lt IE 8]> <script type="text/javascript" src="js/IE8.js"></script><![endif]-->ou o [http://revolucao.etc.br/archives/falso-hov...ernet-explorer/](http://revolucao.etc.br/archives/falso-hover-no-internet-explorer/)
<!--[if lt IE 7]><style type="text/css">body { behavior:url(scripts/csshover.htc); }</style><![endif]-->Discussão (9)
Carregando comentários...