Menu vertical com submenu não funciona
Olá,
Eu estou queimando cuca com um menu vertical aqui acho que após esquentar tanto a cabeça não consigo ver uma solução. O grupo poderia me ajudar me mostrando o que preciso fazer para que o submenu fique a direta do menu principal? A idéia é inspirada no menu do submarino.
Segue código:
<html>
<head>
<title>Teste ferrado</title>
<link href="./teste.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="areaNavegacao">
<div id="areaMenuPrincipal">
<ul id="menuPrincipal"><li id="promocoes" class="itemMenu" onmouseover="mostraSubMenu(this)" onmouseout="escondeSubMenu()">Promoções</li>
<li id="acougue" class="itemMenu" onmouseover="mostraSubMenu(this)" onmouseout="escondeSubMenu()">Açougue<ul class="subMenu"><li class="itemSubMenu"><a href="[http://192.168.0.173/magento/acougue/maquinas-para-produc-o.html](http://192.168.0.173/magento/acougue/maquinas-para-produc-o.html)">Máquinas para Produção</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/acougue/balc-o-expositor-carnes-e-salsicharia.html](http://192.168.0.173/magento/acougue/balc-o-expositor-carnes-e-salsicharia.html)">Balcão Expositor Carnes e Salsicharia</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/acougue/expositor-para-congelados.html](http://192.168.0.173/magento/acougue/expositor-para-congelados.html)">Expositor para Congelados</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/acougue/estoque-e-armazenagem.html](http://192.168.0.173/magento/acougue/estoque-e-armazenagem.html)">Estoque e Armazenagem</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/acougue/expositor-cervejeiras-e-refrigerantes.html](http://192.168.0.173/magento/acougue/expositor-cervejeiras-e-refrigerantes.html)">Expositor Cervejeiras e Refrigerantes</a></li>
</ul>
</li>
<li id="lanchonete" class="itemMenu" onmouseover="mostraSubMenu(this)" onmouseout="escondeSubMenu()">Bar e Lanchonete<ul class="subMenu"><li class="itemSubMenu"><a href="[http://192.168.0.173/magento/lanchonete/fritadores-e-tachos.html](http://192.168.0.173/magento/lanchonete/fritadores-e-tachos.html)">Fritadores e Tachos</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/lanchonete/chapas-e-sanduicheiras.html](http://192.168.0.173/magento/lanchonete/chapas-e-sanduicheiras.html)">Chapas, Sanduicheiras, Crepe e Salsicheria</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/lanchonete/forno-para-pizza.html](http://192.168.0.173/magento/lanchonete/forno-para-pizza.html)">Forno para Pizza</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/lanchonete/fogoes-com-e-sem-forno.html](http://192.168.0.173/magento/lanchonete/fogoes-com-e-sem-forno.html)">Fogões com e sem forno</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/lanchonete/liquidificadores-trituradores-e-extratores.html](http://192.168.0.173/magento/lanchonete/liquidificadores-trituradores-e-extratores.html)">Liquidificadores, Trituradores e Extratores </a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/lanchonete/manipuladores-de-alimentos.html](http://192.168.0.173/magento/lanchonete/manipuladores-de-alimentos.html)">Manipuladores de Alimentos</a></li>
</ul>
</li>
<li id="padaria" class="itemMenu" onmouseover="mostraSubMenu(this)" onmouseout="escondeSubMenu()">Padaria<ul class="subMenu"><li class="itemSubMenu"><a href="[http://192.168.0.173/magento/padaria/maquinarios-para-producao-padaria.html](http://192.168.0.173/magento/padaria/maquinarios-para-producao-padaria.html)">Maquinários para Produção</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/padaria/acessorios-e-complementos.html](http://192.168.0.173/magento/padaria/acessorios-e-complementos.html)">Acessórios e complementos</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/padaria/expositores-refrigerados.html](http://192.168.0.173/magento/padaria/expositores-refrigerados.html)">Expositores refrigerados</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/padaria/expositores-secos.html](http://192.168.0.173/magento/padaria/expositores-secos.html)">Expositores secos</a></li>
</ul>
</li>
<li id="restaurante-e-cozinhas" class="itemMenu" onmouseover="mostraSubMenu(this)" onmouseout="escondeSubMenu()">Restaurante e cozinha<ul class="subMenu"><li class="itemSubMenu"><a href="[http://192.168.0.173/magento/restaurante-e-cozinhas/mesas-e-cadeiras.html](http://192.168.0.173/magento/restaurante-e-cozinhas/mesas-e-cadeiras.html)">Mesas e cadeiras</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/restaurante-e-cozinhas/equipamentos-para-cozinha.html](http://192.168.0.173/magento/restaurante-e-cozinhas/equipamentos-para-cozinha.html)">Equipamentos para cozinha</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/restaurante-e-cozinhas/balcoes-e-expositores.html](http://192.168.0.173/magento/restaurante-e-cozinhas/balcoes-e-expositores.html)">Balcões e expositores</a></li>
</ul>
</li>
<li id="supermercados" class="itemMenu" onmouseover="mostraSubMenu(this)" onmouseout="escondeSubMenu()">Supermercados<ul class="subMenu"><li class="itemSubMenu"><a href="[http://192.168.0.173/magento/supermercados/gondolas-e-expositores.html](http://192.168.0.173/magento/supermercados/gondolas-e-expositores.html)">Gôndolas e expositores</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/supermercados/acessorios.html](http://192.168.0.173/magento/supermercados/acessorios.html)">Acessórios</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/supermercados/expositores-refrigerados.html](http://192.168.0.173/magento/supermercados/expositores-refrigerados.html)">Expositores refrigerados</a></li>
</ul>
</li>
<li id="equipamentos" class="itemMenu" onmouseover="mostraSubMenu(this)" onmouseout="escondeSubMenu()">Equipamentos<ul class="subMenu"><li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/balancas.html](http://192.168.0.173/magento/equipamentos/balancas.html)">Balanças</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/balcoes-e-expositores.html](http://192.168.0.173/magento/equipamentos/balcoes-e-expositores.html)">Balcões e Expositores</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/caixa-e-check-out.html](http://192.168.0.173/magento/equipamentos/caixa-e-check-out.html)">Caixa e Check-out</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/chapa-para-lanches-churrasco.html](http://192.168.0.173/magento/equipamentos/chapa-para-lanches-churrasco.html)">Chapa para Lanches</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/carrinhos.html](http://192.168.0.173/magento/equipamentos/carrinhos.html)">Carrinhos</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/conservadores-e-resfriadores.html](http://192.168.0.173/magento/equipamentos/conservadores-e-resfriadores.html)">Conservadores e Resfriadores</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/diversos.html](http://192.168.0.173/magento/equipamentos/diversos.html)">Diversos</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/expositor-de-bebidas.html](http://192.168.0.173/magento/equipamentos/expositor-de-bebidas.html)">Expositor de Bebidas</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/expositores-para-laticinios.html](http://192.168.0.173/magento/equipamentos/expositores-para-laticinios.html)">Expositores para Laticinios</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/freezer-vertical-expositor.html](http://192.168.0.173/magento/equipamentos/freezer-vertical-expositor.html)">Freezer Vertical</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/fogoes-industriais.html](http://192.168.0.173/magento/equipamentos/fogoes-industriais.html)">Fogão Industrial</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/fornos-gas-e-eletrico.html](http://192.168.0.173/magento/equipamentos/fornos-gas-e-eletrico.html)">Fornos (gás e eletrico)</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/freezer-horizontal.html](http://192.168.0.173/magento/equipamentos/freezer-horizontal.html)">Freezer Horizontal</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/fritadores.html](http://192.168.0.173/magento/equipamentos/fritadores.html)">Fritadores</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/geladeira-para-bebidas.html](http://192.168.0.173/magento/equipamentos/geladeira-para-bebidas.html)">Geladeira para Bebidas</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/geladeira-para-cervejas.html](http://192.168.0.173/magento/equipamentos/geladeira-para-cervejas.html)">Geladeira para Cervejas</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/geladeira-para-sorvetes.html](http://192.168.0.173/magento/equipamentos/geladeira-para-sorvetes.html)">Geladeira para Sorvetes</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/hortifruti-lateral.html](http://192.168.0.173/magento/equipamentos/hortifruti-lateral.html)">Hortifruti Lateral</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/ilha-para-congelados.html](http://192.168.0.173/magento/equipamentos/ilha-para-congelados.html)">Ilha para congelados</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/kit-churrasco.html](http://192.168.0.173/magento/equipamentos/kit-churrasco.html)">Kit Churrasco</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/mesas-e-cadeiras.html](http://192.168.0.173/magento/equipamentos/mesas-e-cadeiras.html)">Mesas e Cadeiras</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/produc-o-e-fabricac-o.html](http://192.168.0.173/magento/equipamentos/produc-o-e-fabricac-o.html)">Produção e Fabricação</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/ventiladores.html](http://192.168.0.173/magento/equipamentos/ventiladores.html)">Ventiladores e Climatizadores</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/linha-gelopar.html](http://192.168.0.173/magento/equipamentos/linha-gelopar.html)">Linha Gelopar</a></li>
<li class="itemSubMenu"><a href="[http://192.168.0.173/magento/equipamentos/produtos-nr12.html](http://192.168.0.173/magento/equipamentos/produtos-nr12.html)">Produtos NR12</a></li>
</ul>
</li>
</ul>
</div>
</body>Folha de estilo: / ------- Menu principal verticalizado ------- /
#areaMenuPrincipal { display: inline-block;}
#slideShowMagento { display: inline-block; width: 700px; vertical-align: top; }
#menuPrincipal { margin-top: 27px; background-color: #ececec; text-align: left; font-family: ubuntu; font-size: 12pt; width: 240px; }
.itemMenu { display:inline-block; width: 210px; padding: 6px 15px;}
.itemMenu:hover { background-color: #005c8e; color: white; cursor: pointer; }
.subMenu { width: 240px; background-color: #005c8e; color: white; z-index: -9999; position: relative; left: -99999; top: 0; }
.itemSubMenu { display:inline-block; width: 240px; padding: 6px 15px;}
.itemSubMenu:hover { background-color: #0384cb;}
.itemSubMenu a { color: white; }
.itemSubMenu:hover a { text-decoration: none; }
Gambiarra em JS
<script type="text/javascript">
var subMenuAtivo = null;
function escondeSubMenu()
{
subMenuAtivo[0].style.left = "-9999px";
subMenuAtivo[0].style.zIndex = "-9999";
subMenuAtivo = null;
return null;
}
function mostraSubMenu(el)
{
subMenuAtivo = el.getElementsByClassName("subMenu");
subMenuAtivo[0].style.left = "225px";
subMenuAtivo[0].style.zIndex = "09999";
return null;
}
</script>Obrigado pela ajuda!Discussão (4)
Carregando comentários...