Menu do iMasters

[Jackpot 1]

Não quero copiar, quero aprender pois preciso usar um no mesmo estilo.Tanto a parte estética quanto a parte lógica (as listas e a ação) de abre e fecha.[]'s

[micox 2]

Leia os tutoriais do maujor sobre menus ( http://www.maujor.com/tutorial/ddownmenu.php - não leia só o desta página, lá no site do cara tem vários), SE não te ajudar, veja este post onde o cara fez um menu: Dúvidas frequentes --> Como fazer menus horizontal e vertical

 

Ah, voce também sempre pode dar uma olhada no cód fonte do imasters...

[Jackpot 1]

Hehe, sobre olhar o fonte eu até tentei, mas só consegui foi a parte visual. O JavaScript num ia mais nem a pau.Eu salvei até a página e no teste sem modificações deu certo. Quando eu ia tentar fazer passo por passo...Mas valeu, vou dar uma lida.-------EDIT-------Abri a index do iMasters, limpei tudo deixando só o menu.Cheguei a isso:

<ul id="menu"><li><span>Canais iMasters</span><ul id="canais"><li><a href="http://www.imasters.com.br/canal/bancodedados">Banco de Dados</a><div><ul><li><a href="http://www.imasters.com.br/secao/access">Access</a></li><li><a href="http://www.imasters.com.br/secao/db2">DB2</a></li><li><a href="http://www.imasters.com.br/secao/interbase">Interbase</a></li><li><a href="http://www.imasters.com.br/secao/mysql">MySQL</a></li><li><a href="http://www.imasters.com.br/secao/oracle">Oracle</a></li><li><a href="http://www.imasters.com.br/secao/postgresql">PostgreSQL</a></li><li><a href="http://www.imasters.com.br/secao/sql_server">SQL Server</a></li></ul></div></li><li><a href="http://www.imasters.com.br/canal/criacao">Criação</a><div><ul><li><a href="http://www.imasters.com.br/secao/3dsmax">3ds max</a></li><li><a href="http://www.imasters.com.br/secao/fireworks">Fireworks</a></li><li><a href="http://www.imasters.com.br/secao/lightwave3d">Lightwave 3D</a></li><li><a href="http://www.imasters.com.br/secao/photoshop">Photoshop</a></li><li><a href="http://www.imasters.com.br/secao/suite_corel">Suite Corel</a></li><li><a href="http://www.imasters.com.br/secao/teoria">Teoria/Design</a></li><li><a href="http://www.imasters.com.br/secao/usabilidade">Usabilidade</a></li></ul></div></li><li><a href="http://www.imasters.com.br/canal/desenvolvimento">Desenvolvimento</a><div><ul><li><a href="http://www.imasters.com.br/secao/des_de_software">Des. de Software</a></li><li><a href="http://www.imasters.com.br/secao/dreamweaver">Dreamweaver</a></li><li><a href="http://www.imasters.com.br/secao/flash">Flash</a></li><li><a href="http://www.imasters.com.br/secao/jdeveloper">JDeveloper</a></li><li><a href="http://www.imasters.com.br/canal/dotnet">Plataforma .Net</a></li><li><a href="http://www.imasters.com.br/secao/visual_foxpro">V. FoxPro</a></li><li><a href="http://www.imasters.com.br/canal/webstandards">Web Standards</a></li><li><a href="http://www.imasters.com.br/secao/zope">Zope</a></li></ul></div></li><li><a href="http://www.imasters.com.br/canal/gerencia">Gerência</a><div><ul><li><a href="http://www.imasters.com.br/secao/bi">Business Intelligence</a></li><li><a href="http://www.imasters.com.br/secao/direito">Direito e Web</a></li><li><a href="http://www.imasters.com.br/secao/egov">E-Gov</a></li><li><a href="http://www.imasters.com.br/secao/governanca">Governança de TI</a></li><li><a href="http://www.imasters.com.br/secao/intranets">Intranets</a></li><li><a href="http://www.imasters.com.br/canal/mercado">Mercado</a></li><li><a href="http://www.imasters.com.br/canal/webmarketing">Web Marketing</a></li></ul></div></li><li><a href="http://www.imasters.com.br/canal/mercado">Mercado</a><div><ul><li><a href="http://www.imasters.com.br/secao/carreira">Carreira</a></li><li><a href="http://www.imasters.com.br/secao/certificacoes">Certificações</a></li><li><a href="http://www.imasters.com.br/secao/ecommerce">E-commerce</a></li><li><a href="http://www.imasters.com.br/secao/tendencias">Tendências</a></li></ul></div></li><li><a href="http://www.imasters.com.br/canal/offline">Offline</a><div><ul><li><a href="http://www.imasters.com.br/secao/des_de_software">Des. de Software</a></li><li><a href="http://www.imasters.com.br/secao/hardware">Hardware</a></li></ul></div></li><li><a href="http://www.imasters.com.br/canal/dotnet">Plataforma .Net</a><div><ul><li><a href="http://www.imasters.com.br/secao/aspnet">ASP.NET</a></li><li><a href="http://www.imasters.com.br/secao/csharp">C#</a></li><li><a href="http://www.imasters.com.br/secao/vbnet">VB.NET</a></li><li><a href="http://www.imasters.com.br/secao/visual_studio">Visual Studio</a></li><li><a href="http://www.imasters.com.br/secao/xml">XML</a></li></ul></div></li><li><a href="http://www.imasters.com.br/canal/programacao">Programação</a><div><ul><li><a href="http://www.imasters.com.br/secao/actionscript">ActionScript</a></li><li><a href="http://www.imasters.com.br/secao/asp">ASP</a></li><li><a href="http://www.imasters.com.br/secao/coldfusion">ColdFusion</a></li><li><a href="http://www.imasters.com.br/secao/delphi">Delphi</a></li><li><a href="http://www.imasters.com.br/secao/java">Java</a></li><li><a href="http://www.imasters.com.br/secao/javascript">Javascript</a></li><li><a href="http://www.imasters.com.br/secao/php">PHP</a></li><li><a href="http://www.imasters.com.br/secao/uml">UML</a></li><li><a href="http://www.imasters.com.br/secao/visual_basic">Visual Basic</a></li><li><a href="http://www.imasters.com.br/secao/xml">XML</a></li></ul></div></li><li><a href="http://www.imasters.com.br/canal/redes">Redes</a><div><ul><li><a href="http://www.imasters.com.br/secao/cisco">Cisco</a></li><li><a href="http://www.imasters.com.br/secao/linux">Linux</a></li><li><a href="http://www.imasters.com.br/secao/servidores_windows">Servidores Windows</a></li></ul></div></li><li><a href="http://www.imasters.com.br/canal/seguranca">Segurança</a><div><ul><li><a href="http://www.imasters.com.br/secao/direito">Direito e Web</a></li><li><a href="http://www.imasters.com.br/secao/virus">Vírus</a></li></ul></div></li><li><a href="http://www.imasters.com.br/canal/livre">Software Livre</a><div><ul><li><a href="http://www.imasters.com.br/secao/linux">Linux</a></li><li><a href="http://www.imasters.com.br/secao/mysql">MySQL</a></li><li><a href="http://www.imasters.com.br/secao/postgresql">PostgreSQL</a></li></ul></div></li><li><a href="http://www.imasters.com.br/canal/tecnologia">Tecnologia</a><div><ul><li><a href="http://www.imasters.com.br/secao/acessibilidade">Acessibilidade</a></li><li><a href="http://www.imasters.com.br/secao/des_de_software">Des. de Software</a></li><li><a href="http://www.imasters.com.br/secao/mobile">Mobile</a></li><li><a href="http://www.imasters.com.br/secao/tendencias">Tendências</a></li><li><a href="http://www.imasters.com.br/secao/voip">VoIP</a></li><li><a href="http://www.imasters.com.br/secao/webservices">WebServices</a></li></ul></div></li><li><a href="http://www.imasters.com.br/canal/webmarketing">Web Marketing</a><div><ul><li><a href="http://www.imasters.com.br/secao/email_marketing">E-mail Marketing</a></li><li><a href="http://www.imasters.com.br/secao/publicidade">Publicidade Online</a></li><li><a href="http://www.imasters.com.br/secao/seo">SEO</a></li></ul></div></li><li><a href="http://www.imasters.com.br/canal/webstandards">Web Standards</a><div><ul><li><a href="http://www.imasters.com.br/secao/acessibilidade">Acessibilidade</a></li><li><a href="http://www.imasters.com.br/secao/ajax">Ajax</a></li><li><a href="http://www.imasters.com.br/secao/css">CSS</a></li><li><a href="http://www.imasters.com.br/secao/javascript">Javascript</a></li><li><a href="http://www.imasters.com.br/secao/tableless">Tableless</a></li><li><a href="http://www.imasters.com.br/secao/usabilidade">Usabilidade</a></li><li><a href="http://www.imasters.com.br/secao/xhtml">XHTML</a></li><li><a href="http://www.imasters.com.br/secao/xml">XML</a></li></ul></div></li></ul></li><li><span>Serviços iMasters</span><ul><li><a href="http://www.imasters.com.br/evento">Agenda de Eventos</a></li><li><a href="http://www.codigolivre.com.br/">Códigos Livres</a></li><li><a href="http://www.imasters.com.br/cssinterativo">CSS Interativo</a></li><li><a href="http://www.imasters.com.br/cursos">Cursos Online</a></li><li><a href="http://www.imasters.com.br/dicas">Dicas iMasters</a></li><li><a href="http://www.webdocs.com.br/">Documentações</a></li><li><a href="http://www.imasters.com.br/download">Downloads</a></li><li><a href="http://www.imasters.com.br/entrevistas">Entrevistas</a></li><li><a href="http://www.imasters.com.br/faq">FAQ</a></li><li><a href="http://forum.imasters.com.br/">Fórum iMasters</a></li><li><a href="http://www.imasters.com.br/grupos">Guia de Users Groups</a></li><li><a href="http://www.imasters.com.br/intercon/">iMasters InterCon</a></li><li><a href="http://loja.imasters.com.br/">iMasters Shop</a></li><li><a href="http://mercado.imasters.com.br/">Mercado iMasters</a></li><li><a href="http://www.imasters.com.br/contrato">Modelos de Contrato</a></li><li><a href="http://www.imasters.com.br/tabela_de_cores">Tabela de Cores Web</a></li></ul></li><li><span>Interação</span><ul><li><a href="http://www.imasters.com.br/anuncie">Anuncie no iMasters</a></li><li><a href="http://www.imasters.com.br/cadastro">Cadastre-se no iMasters</a></li><li><a href="http://www.imasters.com.br/faleconosco">Fale Conosco</a></li><li><a href="http://www.imasters.com.br/sobre">Sobre o iMasters</a></li></ul></li></ul><script src="menu.js" type="text/javascript"></script></div>

E no CSS, isso:

ul#menu { /*height:1361px; background:url(http://static.imasters.com.br/img/capa/f_menu_2.gif) repeat-y;*/ margin-right:10px; margin-top:-16px; float:left; width: 152px; list-style:none; border-top:1px solid #FFF; border-right:1px solid #FFF; }ul#menu li { width:152px; float:left; background:url(http://static.imasters.com.br/img/capa/f_menu_1.gif) #028192; line-height:26px; color: #FFF; font-weight:bold;}ul#menu li span { background:url(http://static.imasters.com.br/img/capa/f_menu_3.gif) no-repeat left; font:bold 11px Arial, Helvetica, sans-serif; padding-left:17px; line-height:26px; }ul#menu ul { list-style:none; }ul#menu ul li a { font-size:11px; color:#333; padding-left:10px; }ul#menu ul li { height:26px; float:left; width:151px; border-top: 1px solid #FFF; border-bottom:1px solid #D1D1D1; border-right:1px solid #313131; background:none; background-color:#EDEDED; font: normal 11px Arial, Helvetica, sans-serif; line-height:26px; }ul#menu ul#canais li { background:url(http://static.imasters.com.br/img/capa/f_menu_4.gif) #EDEDED no-repeat left top; }ul#menu ul#canais li a { display:block; padding-left:10px; width:141px; background:url(http://static.imasters.com.br/img/capa/menu_seta.gif) no-repeat; background-position: 136px; }ul#menu ul#canais li.over { background-image:url(http://static.imasters.com.br/img/capa/f_menu_5.gif); }ul#menu ul#canais li.over div { z-index:10; display:block; }ul#menu ul#canais li div { margin-top:-28px; border:1px solid #999; width:152px; float:left; display:none; position:absolute; left:162px; }ul#menu ul#canais li div ul li { background:none; background-color:#F8F8F8; border:0px; border-left: 8px solid #DCECF0; border-top: 1px solid #FFF; border-bottom:1px solid #D1D1D1; width: 144px; }ul#menu ul#canais li div ul li.sover { background-color:#FFFFFF; border-left-color:#F87918; }ul#menu ul#canais li div ul li a { background:none; }ul#menu li.dial { text-align:center; padding-top:10px; height:90px; background-image:none; border:0px; border-right:1px solid #000; }ul#menu li.dial img { border:0px; display:block; }

No arquivo original vai. Na "cópia" de aprendizxado não roda. Tá faltando alguma coisa?[]'s

[micox 2]

Voce leu o link do maujor que te passei? Ele explica passo a passo: http://www.maujor.com/tutorial/ddownmenu-a.php

[Jackpot 1]

É que eu quero juntar dois códigos de CSS pra misturar um efeito over para "acender" o <li> com o mouse sobre mais esse menu em cascata.E quando faço isso no do Maujor ele fica certinho NO FIREFOX.No IEca não.Pode me ajudar?[]'s

[micox 2]

Lá no site do maujor (em um dos tutoriais de menu dele) ele também explica porque funciona SÓ no FF e como fazer pra funcionar no IE também...É a questão da pseudo hover que não rola no IE. Procura isso lá que voce acha.

[Jackpot 1]

Então, no código que tem lá funciona no IEca também. Só que quando eu vou juntar o outro CSS pra fazer o over de acender, num funciona mais.Eu queria mesmo era aprender como funciona o do portal, achei muito legal, porque é limpo e junta minhas duas necessidades.[]'s