[Resolvido] Sub-menu infinito
Seguinte pessoal, eu criei um script em php que monta um menu a partir de um XML, esta funcionando certinho.
O problema é que pode ser criado varios sub menus ex: menu->sub1->sub2->sub3->sub4->sub5->...
O que eu estou querendo saber é como eu faco para todos os submenus funcionarem, independente da quantidade de sub-menus.
A estrutura que o PHP gera é esta
<html>
<head>
<title></title>
</head>
<body>
<div id="menu">
<ul><!-- INI MENU -->
<li><a href="#">Home</a></li>
<li><a href="#">Empresa</a><!-- INI SUBMENU LB -->
<ul class="subMenu"><!-- INI SUBMENU -->
<li><a href="#">Historia</a></li>
<li><a href="#">Objetivo</a></li>
</ul><!-- FIM SUBMENU -->
</li><!-- FIM SUBMENU LB -->
<li><a href="#">Produtos</a><!-- INI SUBMENU LB -->
<ul class="subMenu"><!-- INI SUBMENU -->
<li><a href="#">Pecas</a><!-- INI SUBMENU LB -->
<ul class="subMenu"><!-- INI SUBMENU -->
<li><a href="#">Quadrada</a><!-- INI SUBMENU LB -->
<ul class="subMenu"><!-- INI SUBMENU -->
<li><a href="#">Pequena</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Grande</a></li>
<li><a href="#">Extra Grande</a></li>
<li><a href="#">Personalizado</a><!-- INI SUBMENU LB -->
<ul class="subMenu"><!-- INI SUBMENU -->
<li><a href="#">Mais alguns menus</a></li>
<li><a href="#">Esta no fim</a></li>
<li><a href="#">Ufa !! Quantos !!!</a></li>
</ul><!-- FIM SUBMENU -->
</li><!-- FIM SUBMENU LB -->
</ul><!-- FIM SUBMENU -->
</li><!-- FIM SUBMENU LB -->
<li><a href="#">Redonda</a></li>
<li><a href="#">Triangular</a></li>
</ul><!-- FIM SUBMENU -->
</li><!-- FIM SUBMENU LB -->
</ul><!-- FIM SUBMENU -->
</li><!-- FIM SUBMENU LB -->
<li><a href="#">Endereco</a></li>
<li><a href="#">Contato</a></li>
</ul><!-- FIM MENU -->
</div>
</body>
</html>O CSS é este
<html>
<head>
<style>
#menu{
width:200px;
}padding:0;
margin:0;
float:left;
}background:#d7f4ff;
list-style:none;
display:block;
position:relative;
}#menu ul li a{
display:inline-block;
border:1px solid #000;
width: 195px;
height:25px;
margin-top:-1px;
padding-left:5px;
}#menu ul li a:hover{
background:#3eb1ff;
}#menu ul li:hover ul{
display:block;
}#menu ul li:hover ul ul, #menu ul ul li:hover ul ul{display:none}
#menu ul ul li:hover ul, #menu ul ul ul li:hover ul{display:block;}
.subMenu,.subsubMenu,.subsubsubMenu,.subsubsubsubMenu{
position:absolute;
left:201px;
top:0px;
display:none;
}.subMenu li a{
}
</style>
</head>
<body>
</body>
</html>O que eu percebi foi que para cada sub-menu eu tenho que adicionar um UL nestas duas linhas
<html>
<head>
<style></style>
</head>
<body>
</body>
</html>Tem como fazer funcionar sem ter que adicionar um UL para cada Item ? Ou vou ter que dar a volta com JS ?
flws !!
Discussão (3)
Carregando comentários...