Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá
Estou tendo alguma dificuldade mudando este menu CSS de 2 para 3 níveis
Eu tinha lido este tutorial
mas confesso que nao tive sucesso ao tentar adaptar a mesma lógica a este script:
<style type="text/css">
ul.menu1, ul ul {padding:0; margin:0; border:0; list-style-type:none; height:22em; overflow-x:hidden; overflow-y:auto; background:#f8f8f8; width:14em; text-align:left; color:#fff; border:1px solid #606;}
ul.menu1 {margin:0 auto; overflow-x:hidden; overflow-y:auto;}
ul.menu1 table {border-collapse:collapse; padding:0; margin:0; font-size:1em;}
ul.menu1 ul {margin-left:0.5em; overflow-x:hidden; overflow-y:auto;}
ul.menu1 li {text-indent:0.5em;}
ul.menu1 li.drop {margin-bottom:-2px;}
ul.menu1 li a,
ul.menu1 li a:visited {display:block; width:14em; height:2em; line-height:1.9em; text-decoration:none; color:#606;}
ul.menu1 li a.last,
ul.menu1 li a.last:visited {display:block; width:10em; height:14em; line-height:2em;}
ul.menu1 li ul {display:none;}
ul.menu1 li:hover a,
ul.menu1 li a:hover {border:0; color:#00c; font-weight:bold;}
ul.menu1 li:hover ul,
ul.menu1 li a:hover ul {display:block; height:12em; width:12em; margin-top:-1px; background:#def; border:1px solid #000;}
ul.menu1 li:hover ul li a,
ul.menu1 li a:hover ul li a {height:2em; background:#def; color:#00c; font-weight:normal;}
ul.menu1 li:hover ul li:hover a,
ul.menu1 li a:hover ul li a:hover {background:#00c; color:#fff;}
</style>
</head>
<body>
<ul class="menu1">
<li class="drop"><a href="item1.html">PRODUCTS<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
<ul>
<li><a href="item1a.html">Mobiles</a></li>
<li><a href="item1b.html">Photoframes</a></li>
<li><a href="item1c.html">Tripods</a></li>
<li><a href="item1d.html">Cameras</a></li>
<li><a href="item1a.html">Mobiles</a></li>
<li><a href="item1b.html">Photoframes</a></li>
<li><a href="item1c.html">Tripods</a></li>
<li><a href="item1d.html">Cameras</a></li>
<li><a href="item1a.html">Mobiles</a></li>
<li><a href="item1b.html">Photoframes</a></li>
<li><a href="item1c.html">Tripods</a></li>
<li><a href="item1d.html">Cameras</a></li>
<li><a href="item1a.html">Mobiles</a></li>
<li><a href="item1b.html">Photoframes</a></li>
<li><a href="item1c.html">Tripods</a></li>
<li><a href="item1d.html">Cameras</a></li>
<li><a href="item1a.html">Mobiles</a></li>
<li><a href="item1b.html">Photoframes</a></li>
<li><a href="item1c.html">Tripods</a></li>
<li><a href="item1d.html">Cameras</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li class="drop"><a href="item2.html">SERVICES<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
<ul>
<li><a href="item2a.html">Photography</a></li>
<li><a href="item2b.html">Video editing</a></li>
<li><a href="item2c.html">Web design</a></li>
<li><a href="item2d.html">Guides</a></li>
<li><a href="item2e.html">Tutorials</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li class="drop"><a href="item3.html">PORTFOLIO<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
<ul>
<li><a href="item3a.html">Web Sites</a></li>
<li><a href="item3b.html">Photo Galleries</a></li>
<li><a href="item3c.html">Videos</a></li>
<li><a href="item3d.html">Animation</a></li>
<li><a href="item3e.html">Banner design</a></li>
<li><a href="item3f.html">Logo design</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li class="drop"><a href="item4.html">LINKS<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
<ul>
<li><a href="item4a.html">Web sites</a></li>
<li><a href="item4b.html">Free stuff</a></li>
<li><a href="item4c.html">Fonts</a></li>
<li><a href="item4d.html">References</a></li>
<li><a href="item4e.html">Guides</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="last" href="item5.html" title="Home">HOME</a></li>
</ul>
</div> <!-- end of info -->O original está funcionando aqui: Menu CSS 2 níveis
Um abraço! :P
Olá Alfa5, bem vindo ao fórum. :joia:
Que tal uma pesquisada no Google? Veja o que eu encontrei:
http://www.tobypitman.com/jquery-style-menu-with-css3/
http://css3menu.com/ <- Muitos exemplos ótimos
http://speckyboy.com/2010/03/15/15-css3-navigation-and-menu-tutorials-and-techniques/
http://elisondesign.com.br/menus-de-navegacao-com-css3/
http://www.dynamicdrive.com/style/csslibrary/category/C2/
:D