Publicado em 20 de nov.

Menu DropDown 4 niveis

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/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](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ç&atildeo de Cliente</a></li>
 <li><a href="#">Exclusão de Cliente</a></li>
 </ul>
 </li>
 <li><a href="#">Promoç&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ç&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ç&atildeo de Produto</a></li>
 <li><a href="#">Exclus&atildeo de Produto</a></li>
 </ul>
 </li>
 <li><a href="#">Composiç&atildeo de Produto</a>
 <ul>
 <li><a href="#">Inclus&atildeo de Composiç&atildeo de Produto</a></li>
 <li><a href="#">Alteraç&atildeo de Composiç&atildeo de Produto</a></li>
 <li><a href="#">Exclus&atildeo de Composiç&atildeo de Produto</a></li>
 </ul>
 </li>
 <li><a href="#">Invent&aacuterio</a></li>
 <li><a href="#">Movimentaç&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ç&atildeo por Produto</a></li>
 <li><a href="#">Movimentaç&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ç&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ç&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.

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

leonardo de andrade baessa· 20 de nov.

Pelo que pude perceber apesar da estrutura estar gigantesca é que há tags não fechadas nas estrutura,

será preciso fechar as tags e estruturar ainda mas seu css.

Lord_Rato· 20 de nov.

>
Pelo que pude perceber apesar da estrutura estar gigantesca é que há tags não fechadas nas estrutura,

será preciso fechar as tags e estruturar ainda mas seu css.

Oi Leonardo.

Vc tem razão quanto ao tamanho da estrutura, é que sou programador php e estou conhecendo CSS apenas agora, e este menu faz parte de um pequeno programa de controle financeiro/estoque que estou desenvolvendo.

Por favor, poderia ser mais específico, pois tentei localizar a falta de fechamento de tag no código e não encontrei.

Obrigado pela ajuda.

gedmilson· 20 de nov.

Você não fechou as (ul).

Lord_Rato· 21 de nov.

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.