PHP Problemas com Menu no dreamweaver

mm_edilson · 8 de fevereiro de 2018

Boa tarde, estou criando um site para minha igreja, mas sou muito cru ainda m PHP. Fiz um menu horizontal, e aparentemente funciona. Contudo o submenu abre mesmo quando passo o mouse la em baixo, fora da barra. Alguém pode dar uma dica? Se quiser dar uma olhada já tá publicado em www.ibnagv.com.br

Segue o código

<style type="text/css">

.menu_corpo {

width: 1000px;

position: absolute;

}

.menu_corpo p {

margin: 0px;

padding: 0px;

}

</style>

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

</head>



<body>

<div class="menu_corpo">

<ul id="MenuBar1" class="MenuBarHorizontal">

<li><a href="index.php?pagina=home">Home</a></li>

<li><a class="MenuBarItemSubmenu" href="#">Sobre Nós</a>

<ul>

<li><a href="index.php?pagina=visao">Nossa Visão</a></li>

<li><a href="index.php?pagina=missao">Nossa Missão</a></li>

<li><a href="index.php?pagina=valores">Nossos Valores</a></li>

<li><a href="index.php?pagina=fe">Nossa Fé</a></li>

</ul>

</li>

<li><a class="MenuBarItemSubmenu" href="#">Para Você</a>

<ul>

<li><a href="index.php?pagina=como_chegar">Como Chegar</a></li>

<li><a href="index.php?pagina=como_se_tornar_membro">Como se tornar membro</a></li>

<li><a href="index.php?pagina=atividades">Atividades</a></li>

<li><a href="index.php?pagina=calendario">Calendário Anual</a></li>

<li><a href="index.php?pagina=boletim">Boletim Semanal</a></li>

<li><a href="index.php?pagina=escalas">Escalas de Serviços</a></li>

<li><a class="MenuBarItemSubmenu" href="#">Pedidos</a>

<ul>

<li><a href="index.php?pagina=pedido_de_oracao">Oração</a></li>

<li><a href="index.php?pagina=pedido_de_visita">Visita</a></li>

<li><a href="index.php?pagina=pedido_de_estudo_biblico">Estudo Bíblico</a></li>

<li><a href="index.php?pagina=pedido_de_aconselhamento">Aconselhamento</a></li>

</ul>

</li>

</ul>

</li>

<li><a class="MenuBarItemSubmenu" href="#">Ministérios</a>

<ul>

<li><a href="index.php?pagina=pastoral">Pastoral</a></li>

<li><a href="index.php?pagina=musica">Música</a></li>

<li><a href="index.php?pagina=infantojuvenil">Infantojuvenil</a></li>

<li><a href="index.php?pagina=adojovem">Adojovem</a></li>

<li><a href="index.php?pagina=conviver">Conviver</a></li>

<li><a href="index.php?pagina=anunciai">Anunciai</a></li>

<li><a href="index.php?pagina=mcm">MCM</a></li>

<li><a href="index.php?pagina=er">ER</a></li>

<li><a href="index.php?pagina=intercessao">Intercessão</a></li>

<li><a class="MenuBarItemSubmenu" href="#">EBD</a>

<ul>

<li><a class="MenuBarItemSubmenu" href="#">Classes</a>

<ul>

<li><a href="index.php?pagina=ebd_classe_amiguinhos_de_jesus">Amiguinhos de Jesus</a></li>

<li><a href="index.php?pagina=ebd_classe_joias_de_cristo">Joias de Cristo</a></li>

<li><a href="index.php?pagina=ebd_classe_andando_com_jesus">Andando Com Jesus</a></li>

<li><a href="index.php?pagina=ebd_classe_adojovem_siloe">Adojovem - Siloé</a></li>

<li><a href="index.php?pagina=ebd_classe_jovens_casados_pedras_vivas">Jovens Casados - Pedras Vivas</a></li>

<li><a href="index.php?pagina=ebd_classe_adultos_salvos_para_servir">Adultos - Salvos para Servir</a></li>

<li><a href="index.php?pagina=ebd_classe_doutrinas">Doutrinas</a></li>

</ul>

</li>

<li><a class="MenuBarItemSubmenu" href="#">Capacitação</a>

<ul>

<li><a href="index.php?pagina=ebd_capacitacao_videos">Vídeos</a></li>

<li><a href="index.php?pagina=ebd_capacitacao_materiais">Materiais</a></li>

</ul>

</li>

</ul>

</li>

<li><a class="MenuBarItemSubmenu" href="#">PGMs</a>

<ul>

<li><a href="index.php?pagina=pgm_roteiros">Roteiros</a></li>

<li><a class="MenuBarItemSubmenu" href="#">Capacitação</a>

<ul>

<li><a href="index.php?pagina=pgm_capacitacao_videos">Vídeos</a></li>

<li><a href="index.php?pagina=pgm_capacitacao_materiais">Materiais</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

<li><a class="MenuBarItemSubmenu" href="#">Mídia</a>

<ul>

<li><a href="index.php?pagina=videos">Vídeos</a></li>

<li><a href="index.php?pagina=audios">Áudios</a></li>

<li><a href="index.php?pagina=galeria">Galeria</a></li>

<li><a class="MenuBarItemSubmenu" href="#">Cultos</a>

<ul>

<li><a href="index.php?pagina=culto_ao_vivo">Ao Vivo</a></li>

<li><a href="index.php?pagina=cultos_gravados">Gravados</a></li>

</ul>

</li>

</ul>

<li><a href="index.php?pagina=fale_conosco">Contato</a></li></li></ul>

<p> </p>

</div>

<script type="text/javascript">

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

</script>

DiF · 8 de fevereiro de 2018

@mm_edilson Olá,

O primeiro erro que vejo, foi ter usado o Dreamweaver para desenvolver. Ele estraga o código colocando coisas desnecessárias.. que se perde tempo retirando as coisas que não quer. Por recomendação use uma IDE menos "automático" como Eclipse for php, Notepad++ e etc.

Sobre o código, aquilo acontece porque você não limitou o tamanho da <ul> e da <li>.

Você posicionou com posição absoluta tudo.

Para resolver o problema, você deve indicar que o primeiro nível do menu( o que a parece) tem que ser position relative, e definir o position absolute para o segundo nível( quando passa o mouse em cima).

Basicamente o erro é que falta regras no CSS.

Use esse exemplo para tentar implementar a forma certa no seu menu:

https://jsfiddle.net/dife/4hy5e5o9/