Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

luan_alves

menu dropdown com css

Por , em Desenvolvimento frontend

Recommended Posts

luan_alves    3

luan_alves
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

o teu problema então é css.

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhony ZaM    1

Jhony ZaM
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

luan_alves    3

luan_alves
Postado

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;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito