Mudar menu CSS de 2 para 3 níveis

Alfa5 · Abril 23, 2011

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