Login | Register | FAQ
Anonymous

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

+ Post a reply

2 posts Page 1 of 1


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

by Lord_Rato » Fri 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.

Attachments

  1. dropdown.css.txt (1.22 KiB) Downloaded 660 times
    Arquivo CSS

Last edited by Lord_Rato on Sat Nov 21, 2015 3:28 am, edited 1 time in total.

User avatar

Lord_Rato

  • Posts: 2
  • Joined: Fri Nov 20, 2015 5:51 am

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

by Lord_Rato » Sat 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.
User avatar

Lord_Rato

  • Posts: 2
  • Joined: Fri Nov 20, 2015 5:51 am


+ Post a reply

Page 1 of 1