Zaloguj | Zarejestruj | FAQ
Anonymous

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

+ Odpowiedz

Posty: 2 Strona 1 z 1


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

przez Lord_Rato » Pt lis 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.

Załączniki

  1. dropdown.css.txt (1.22 KiB) Pobrane 699 razy
    Arquivo CSS

Ostatnio edytowano So lis 21, 2015 3:28 am przez Lord_Rato, łącznie edytowano 1 raz

Avatar użytkownika

Lord_Rato

  • Posty: 2
  • Dołączył(a): Pt lis 20, 2015 5:51 am

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

przez Lord_Rato » So lis 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 użytkownika

Lord_Rato

  • Posty: 2
  • Dołączył(a): Pt lis 20, 2015 5:51 am


+ Odpowiedz

Strona 1 z 1