Entrar | Registrar | FAQ
Anonymous

Menu drop down com 4º nível sem funcionar [RESOLVIDO]

+ Postar uma resposta

2 Mensagens Página 1 de 1


Menu drop down com 4º nível sem funcionar [RESOLVIDO]

por Lord_Rato » Sex Nov 20, 2015 6:02 am

Olá pessoal.

Estou coneçando no CSS e estou com uma dúvida que pesquisei e não encontrei nada e assim não estou conseguindo resolver.
Criei um menu drop down de 4 níveis (ex: nivel1-financeiro, nivel2-pagar, nivel2-receber, nivel3-lançamento, nivel3-excluirLançamento, nivel3-relatórios, nivel4-relatorioPagar, nivel4-relatorioReceber), e o quarto nível não fica escondido para quando eu declarar o hover ele aparecer.
O quarto nível está aparecendo quando há um hover no segundo nível (quando o mouse passa por nivel2- pagar/receber) do menu. Ele deveria ficar oculto até ocorrer um hover no terceiro nível para que ele então aparecesse.

Abaixo o código html.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="dropdown.css" />
<title>Menu Drop Down</title>
</head>
<body>
<div id="menu">
<ul>
<li><a href="">Cadastros</a>
<ul>
<li><a href="cad_usuario.php">Usu&aacuterios</a></li>
<li><a href="#">Empresas</a></li>
<li><a href="#">Clientes</a></li>
<li><a href="#">Fornecedores</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Bancos</a></li>
</ul>
</li>
<li><a href="">Clientes</a>
<ul>
<li><a href="#">Cadastro de Clientes</a>
<ul>
<li><a href="#">Inclus&atildeo de Cliente</a></li>
<li><a href="#">Altera&ccedil&atildeo de Cliente</a></li>
<li><a href="#">Exclusão de Cliente</a></li>
</ul>
</li>
<li><a href="#">Promo&ccedil&otildees Cadastradas</a></li>
<li><a href="#">&Uacuteltimas Compras</a></li>
<li><a href="#">Relat&oacuterios</a>
<ul>
<li><a href="#">Clientes por Bairro</a></li>
<li><a href="#">Clientes por Cidade</a></li>
<li><a href="#">Clientes por Regi&atildeo</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Fornecedortes</a>
<ul>
<li><a href="#">Cadastro de Fornecedores</a>
<ul>
<li><a href="#">Inclus&atildeo de Fornecedor</a></li>
<li><a href="#">Altera&ccedil&atildeo de Fornecedor</a></li>
<li><a href="#">Exclusão de Fornecedor</a></li>
</ul>
</li>
<li><a href="#">&Uacuteltimas Compras</a></li>
<li><a href="#">Relat&oacuterios</a>
<ul>
<li><a href="#">Fornecedores por Cidade</a></li>
<li><a href="#">Fornecedores por Regi&atildeo</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Estoque</a>
<ul>
<li><a href="#">Cadastro de Produtos</a>
<ul>
<li><a href="#">Inclus&atildeo de Produto</a></li>
<li><a href="#">Altera&ccedil&atildeo de Produto</a></li>
<li><a href="#">Exclus&atildeo de Produto</a></li>
</ul>
</li>
<li><a href="#">Composi&ccedil&atildeo de Produto</a>
<ul>
<li><a href="#">Inclus&atildeo de Composi&ccedil&atildeo de Produto</a></li>
<li><a href="#">Altera&ccedil&atildeo de Composi&ccedil&atildeo de Produto</a></li>
<li><a href="#">Exclus&atildeo de Composi&ccedil&atildeo de Produto</a></li>
</ul>
</li>
<li><a href="#">Invent&aacuterio</a></li>
<li><a href="#">Movimenta&ccedil&atildeo</a>
<ul>
<li><a href="#">Entradas</a></li>
<li><a href="#">Sa&iacutedas</a></li>
<li><a href="#">Trocas</a></li>
</ul>
</li>
<li><a href="#">Relat&oacuterios</a>
<ul>
<li><a href="#">Quantidade M&iacutenima</a></li>
<li><a href="#">Movimenta&ccedil&atildeo por Produto</a></li>
<li><a href="#">Movimenta&ccedil&atildeo do Estoque</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Compras</a>
<ul>
<li><a href="#">Pedido de Compras</a>
<ul>
<li><a href="#">Inclus&atildeo de Pedido</a></li>
<li><a href="#">Altera&ccedil&atildeo de Pedido</a></li>
<li><a href="#">Exclus&atildeo de Pedido</a></li>
<li><a href="#">Efetuar Pedido</a></li>
</ul>
</li>
<li><a href="#">Projeto de Compras</a></li>
<li><a href="#">Relat&oacuterios</a>
<ul>
<li><a href="#">Compras por Fornecedor</a></li>
<li><a href="#">Compras por Per&iacuteodo</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Vendas</a>
<ul>
<li><a href="#">Pedido de Vendas</a>
<ul>
<li><a href="#">Inclus&atildeo de Pedido</a></li>
<li><a href="#">Altera&ccedil&atildeo de Pedido</a></li>
<li><a href="#">Exclus&atildeo de Pedido</a></li>
<li><a href="#">Efetuar Pedido</a></li>
</ul>
</li>
<li><a href="#">Marketing</a></li>
<li><a href="#">Relat&oacuterios</a>
<ul>
<li><a href="#">Vendas por Cliente</a></li>
<li><a href="#">Vendas por Per&iacuteodo</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Financeiro</a>
<ul>
<li><a href="#">Pagar</a>
<ul>
<li><a href="#">Lan&ccedilamento</a></li>
<li><a href="#">Exclus&atildeo de Lan&ccedilamento</a></li>
<li><a href="#">Relat&oacuterios</a>
<ul>
<li><a href="#">Contas a Pagar Por Fornecedor</a></li>
<li><a href="#">Contas a Pagar Por Per&iacuteodo</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Receber</a>
<ul>
<li><a href="#">Lan&ccedilamento</a></li>
<li><a href="#">Exclus&atildeo de Lan&ccedilamento</a></li>
<li><a href="#">Relat&oacuterios</a>
<ul>
<li><a href="#">Contas a Receber Por Cliente</a></li>
<li><a href="#">Contas a Receber Por Per&iacuteodo</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="">Bancos</a>
<ul>
<li><a href="#">Linhas</a></li>
<li><a href="#">Chamados</a></li>
</ul>
</li>
<li><a href="">Centro de Custo</a>
<ul>
<li><a href="#">Linhas</a></li>
<li><a href="#">Chamados</a></li>
</ul>
</li>
<li><a href="">Contabilidade</a>
<ul>
<li><a href="#">Linhas</a></li>
<li><a href="#">Chamados</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>



Aqui o código CSS.



@CHARSET "UTF-8";

#menu{
width: 1200px;
height: 10px;
margin: auto;
margin-bottom: 6px;
}

#menu a{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
color: #000000;
font-weight: bold;
}

#menu ul{
list-style-type: none;
margin: 0px;
padding: 0px;
margin-top: 3px;
}

#menu ul li{
list-style-type: none;
float: left;
padding: 5px 10px;
background-color: #9a9a9a;
border: 1px solid #000000;
position: relative;
width: 95px;
text-align: center;
border-radius: 7px 7px 7px 7px;
}

#menu ul li ul{
list-style-type: none;
position: absolute;
top: 27px;
left: 0px;
display: none;
text-decoration: none;
color: #ffffff;
font-weight: bold;
}

#menu ul li ul li ul li{
list-style-type: none;
position: relactive;
float: left;
top: -30px;
left: 115px;
display: none;
text-decoration: none;
color: #ffffff;
font-weight: bold;
}



#menu ul li ul li ul li ul li{
display: none; Aqui é onde acredito que esteja o erro
}


#menu a:hover{
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 12px;
color: #ffffff;
font-weight: bold;
}

#menu ul li:hover{
background-color: #babdb6;
color: #ffffff;
}

#menu ul li:hover ul{
display: block;
}

#menu ul li ul li:hover ul li{
display: block;
}

#menu ul li ul li ul li:hover ul li{
display: block;
}




Espero que possam me ajudar.
Se alguém tiver uma boa indicação de curso de CSS online para recomendar (com professor online na sala para esclarecer dúvidas) eu agradeço.

Obrigado.

Anexos

  1. dropdown.css.txt (1.22 KiB) Baixado 402 vezes
    Arquivo CSS

Editado pela última vez por Lord_Rato em Sáb Nov 21, 2015 3:28 am, num total de 1 vezes

Avatar de usuário

Lord_Rato

  • Mensagens: 2
  • Data de registro: Sex Nov 20, 2015 5:51 am

Re: Menu drop down com 4º nível sem funcionar

por Lord_Rato » Sáb Nov 21, 2015 3:24 am

Obrigado por tentarem ajudar amigos, mas encontrei a solução.

O que fiz foi criar classes para cada UL, e aí sim o display: none; funcionou.
Avatar de usuário

Lord_Rato

  • Mensagens: 2
  • Data de registro: Sex Nov 20, 2015 5:51 am


+ Postar uma resposta

Página 1 de 1