Publicado em 6 de abr.

menu dropdown com css

boa noite

eu estou criando um menu css drop dawn, e até o momento funcionou tudo perfeito, o problema é o seguinte, o meu menu é feito por uma lista encadeada html o basicão ul li, o problema esta na seguinte parte, no comando css que eu utilizo o li:hover ul ele coloca o display como block do ul a seguir até ai ta tudo bem, o problema esta aqui o se o link for pequeno quando eu tirar o mouse de cima a parte do menu que esta dentro do proximo bloco ul, vai desaparecer sem dar a oportunidade para que eu pelo menos chegue com o mouse em cima para que ela fique fixa, e eu sei que o problema esta no link pequeno porque quando o link é grande a função funciona legal.

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

William Bruno· 6 de abr.

o teu problema então é css.

corrija o posicionamento e ajuste o css, para deixar a area mais proxima do submenu

Jhony ZaM· 6 de abr.

Ae maninho coloca o codigo ai pra darmos uma vrificada, talves possamos identificar rapido o problema vlw...

luan_alves· 6 de abr.

trazer o link mais proximo do outro eu já fiz, o problema é que se chegar muito perto do link pequeno o link maior vai ficar por cima do submenu segue o codigo para quem poder me ajudar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
 <link href="estiloMenu.css" rel="stylesheet" type="text/css" />
 </head>
 <body >
 <div id="fundo_menu">
 <img src="../images/fundo_banner1.jpg"/>
 <div id="menu">
 <ul id="menu">
 <li><a href="homeecam.php">Home</a></li>
 <li><a href="#">Administração</a>
 <ul>
 <li><a href="ativar_licenca.php">Ativar SW</a></li>
 <li><a href="consultaclientegerente.php">Clientes</a></li>
 <li><a href="#">Estoque</a>
 <ul>
 <li><a href="consulta_estoque_tecnico.php">Consulta Atual</a></li>
 <li><a href="busca_produtos.php">Por Histórico</a></li>
 <li><a href="consulta_estoque_periodo.php">Consulta Período</a></li>
 <li><a href="#">Nuvens</a>
 <ul>
 <li><a href="relatorio_pedido_estoque.php">Consulta / Baixa pedidos</a></li>
 <li><a href="#">Transferir</a>
 <ul>
 <li><a href="produto_prestador.php">Prestador</a></li>
 <li><a href="transferir_produto_equipe.php">Equipe</a></li>
 </ul>
 </li>
 <li><a href="#">Consultar/Manipular</a>
 <ul>
 <li><a href="controle_produto_prestador.php">Outros Prestador</a></li>
 <li><a href="produtos_nuvem_prestador.php">Prestador</a></li>
 <li><a href="aceitar_nuvem_equipe.php">Aceitar transferência</a></li>
 <li><a href="relatorio_nuvem_equipe.php">Relatório nuvens</a></li>
 </ul>
 </li>
 </ul>
 </li>
 </ul>
 </li>
 </ul>
 </li>

 <li><a href="#">Operacional</a>
 <ul>
 <li><a href="#">Chamados</a>
 <ul>
 <li><a href="chamadogerente.php">Equipe</a></li>
 <li><a href="chamado_gerente.php">Outras equipes</a></li>
 <li><a href="status_chamado_gerente.php">Status Chamado</a></li>
 </ul>
 </li>
 <li><a href="#">Relatórios</a>
 <ul>
 <li><a href="#">Chamados fechados</a>
 <ul>
 <li><a href="relatorio_help_gerente.php">Helpdesk</a></li>
 <li><a href="relatorio_lab_gerente.php">Laboratório</a></li>
 <li><a href="relatorio_campo_gerente.php">Campo</a></li>
 <li><a href="relatorio_geral_gerente.php">Todos</a></li>
 </ul>
 </li>
 <li><a href="#">Chamados abertos</a>
 <ul>
 <li><a href="agenda_prestador.php">Agenda prestador</a></li>
 <li><a href="agenda_cliente.php">Agenda cliente</a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><a href="#">RGD</a>
 <ul>
 <li><a href="consulta_rgd.php">Número</a></li>
 <li><a href="consulta_rgd_cliente_tec.php">Cliente</a></li>
 </ul>
 </li>
 </ul>
 </li>

 <li><a href="#">Informativos</a>
 <ul>
 <li><a href="#">Comercial</a>
 <ul>
 <li><a href="info_com_prazos.php">Prazos de Entrega</a></li>
 <li><a href="horas_Trabalho.php">Horas de Trabalho</a></li>
 </ul>
 </li>
 <li><a href="#">Garantia</a>
 <ul>
 <li><a href="info_garan_cameras.php">Cameras</a></li>
 </ul>
 </li>
 <li title=""><a href="#">Técnico</a>
 <ul>
 <li><a href="info_tec_backup.php">Backup de Dados</a></li>
 <li><a href="info_tec_chamados.php">Fechamento De Chamados</a></li>
 <li><a href="info_tec_prazos.php">Manutenção Prazos</a></li>
 <li><a href="montagem_pc.php">Montagem de Pc</a></li>
 <li><a href="#">RMA</a>
 <ul>
 <li><a href="rma.php">Procedimentos</a></li>
 <li><a href="rma_intel.php">Intel</a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><a href="#">Config.Máquinas</a>
 <ul>
 <li><a href="configuracao_deals.php">Aplicativos Deals</a></li>
 <li><a href="configuracao_cftv.php">CFTV</a></li>
 </ul>
 </li>
 <li><a href="#">Downloads</a>
 <ul>
 <li><a href="aplicativos/instalador_biometrico/Instaladores.rar">SDK Griaule</a></li>
 <li><a href="aplicativos/ponto_biometrico/Deals_AccessBioPonto.rar">Ponto Biométrico</a></li>
 <li><a href="aplicativos/tutorial_cftv.rar">Tutorial CFTV</a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><a href="sair.php">Sair</a></li>
 </ul>
 </div>
 </div>
 </body>
</html>

 

#fundo_menu

{

 width: auto;
}

#fundo_menu img
{

 width: 100%;
 height: 60px;
 position: fixed;
}

#menu / Este é o id principal do menu /
{

 list-style:none;
 border: 0;
 margin: 0 auto;
 padding-left: 0;
 position: relative;
 width: 1000px;

}

#menu ul
{

 border: 0px;
}

#menu li
{
display:inline; / faz com que o elemento HTML seja renderizado inline, dentro do bloco na mesma linha. Quando o elemento encontra-se entre dois blocos ele forma o chamado 'bloco anônimo' e é renderizado com a menor largura possível./
position:relative; / Faz com que a posição dos submenus fiquem abaixo do menu/
float:left; / faz com que o texto fique alinhado com o menu /
}
#menu li a / Define o que vai acontecer com os links (a href) dos menus (ul - li) /
{

 float:left;
 height:29px;
 line-height:29px;
 padding:0 25px;
 text-decoration:none; /* Retira a decoração dos links */
 color:#555555;
 font-weight:normal;
 font-size:13px;
 border-left:solid 1px #555555;
 white-space: nowrap;
}

#menu li a:hover / Define o layout dos menus quando o mouse passa por cima /
{

 text-decoration:underline;
}

#menu li:hover ul li ul/ serve apenas para informar ao navegador que a imagem definada acima deve ficar só no menu principal/
{

 background-image: none;
}

#menu li:hover ul/ quando o mouse esta sobre o filho ul da li então o box fica visivel/
{

 display:block;
 background-image:url("img2.gif");
 background-repeat: no-repeat;
}

#menu li ul/ Define o que vai acontecer com os submenus dos menus principais /
{
margin:0; / esta marcação é a ligação entre a ul e a li, para manter o display dela em block/

 padding: 0px;
 line-height:none;
 position:absolute;
 top:20px;
 display:none;
 border: 1px solid silver;
 background-color:#e2e8ce;/* cor do decam */
 box-shadow:5px 5px 10px #ccc;
 /* implementação para o firefox */
 -moz-box-shadow:5px 5px 10px #ccc;
 /* implementação para safari */
 -webkit-box-shadow:5px 5px 10px, #ccc;
}

#menu li ul a
{

 border: 0px;
 height:29px;
 line-height:29px;
 text-decoration:none; /* Retira a decoração dos links */
 color:#555555;
}

#menu li ul li:hover ul li/Acessa o submenu do submenu/
{

 display:block;
}

#menu li ul li:hover ul li ul li/Acessa o submenu do submenu/
{

 display:none;
}

#menu li ul li:hover ul
{

 background-image:url("img1.gif");
 background-repeat: no-repeat;
}

#menu li ul li ul
{
background-color:#e2e8ce;/ cor do decam /

 left: 85px;
 top: auto;
}

#menu li ul li ul li
{

 display: none;
 margin: 0;
 opacity: 0.9;
 position: relative;
}

/ estas regras seguem a árvore html para informar quando um li que tem um filho ul o que deve ser feito, e o que não deve ser feitos com os demais filhos seguintes /
#menu li ul li ul li:hover ul li
{

 display:block;
}

#menu li ul li ul li:hover ul li ul li
{

 display:none;
}

#menu li ul li ul li ul li:hover ul li
{

 display:block;
}

#menu li ul li ul li ul li:hover ul li ul li
{

 display:none;
}

#menu li ul li ul li ul li ul li:hover ul li
{

 display:block;
}

#menu li ul li ul li ul li ul li:hover ul li ul li
{

 display:none;
}