I need to create a submenu in the "Reports" category but I can not do it at all. I am not finding a correct way to create this second level. Thanks for any help.
#nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #23BCE8;
}
#logo {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #03A6E9;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #d1dffa}
.dropdown:hover .dropdown-content {
display: block;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<ul id="nav">
<li id="logo">
<a href="#">Master Lojas</a>
</li>
<li id="drop" class="dropdown">
<a href="#" class="dropbtn">Cadastros</a>
<div class="dropdown-content">
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['101Click'], { });">101 - Clientes</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['102Click'], { });">102 - Departamento de Clientes</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['103Click'], { });">103 - Controle de Logins</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['104Click'], { });">104 - Fornecedores</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['105Click'], { });">105 - Cadastro de Unidades</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['106Click'], { });">106 - Indexadores</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['107Click'], { });">107 - Localidade</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Contas a Pagar/Receber</a>
<div class="dropdown-content">
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['201Click'], { });">201 - Cadastrar tipo de conta a pagar</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['202Click'], { });">202 - Nova Conta a pagar</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['203Click'], { });">203 - Cadastrar tipo de conta a receber</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['204Click'], { });">204 - Nova conta a receber</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['205Click'], { });">205 - Balanço de Contas</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Serviços</a>
<div class="dropdown-content">
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['301Click'], { });">301 - Cadastrar Serviços</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['302Click'], { });">302 - Recibo de Serviços</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['303Click'], { });">303 - Registro de Bens</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['304Click'], { });">304 - Registrar Chamados</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['305Click'], { });">305 - Movimento de Bens</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['306Click'], { });">306 - Envio de SMS</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Estoque</a>
<div class="dropdown-content">
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['401Click'], { });">401 - Consulta de Produtos</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['402Click'], { });">402 - Entrada de Mercadorias</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['403Click'], { });">403 - Cadastrar Departamento</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['404Click'], { });">404 - Cadastrar Artigo</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['405Click'], { });">405 - Cadastrar Marca</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['406Click'], { });">406 - Cadastrar Descrição</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['407Click'], { });">407 - Orçamentos</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['408Click'], { });">408 - Etiquetas</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['409Click'], { });">409 - Trocar código do Produto</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Utilitários</a>
<div class="dropdown-content">
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['501Click'], { });">501 - Agenda de Compromissos</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['502Click'], { });">502 - Chat</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['503Click'], { });">503 - Telefones Gerais</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['504Click'], { });">504 - Agenda do Cliente</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['505Click'], { });">505 - Envio de Emails</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['506Click'], { });">506 - Atualização do Sistema</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['507Click'], { });">507 - Mural de Recados</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['508Click'], { });">508 - Consulta de CEPs e Encomendas</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Relatórios e Consultas</a>
<div class="dropdown-content">
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['601Click'], { });">601 - Clientes</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['602Click'], { });">602 - Consulta validade de produtos</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['603Click'], { });">603 - Tabela de preços</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['604Click'], { });">604 - Reposição de estoque</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Configurações</a>
<div class="dropdown-content">
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['701Click'], { });">701 - Sistema</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['702Click'], { });">702 - Backup</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['703Click'], { });">703 - Usuários</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['704Click'], { });">704 - Acesso Remoto</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['705Click'], { });">705 - Cadastro de senhas do sistema</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['706Click'], { });">706 - Senha dos comandos</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">Caixa</a>
<div class="dropdown-content">
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['801Click'], { });">801 - Receber Remessa</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['802Click'], { });">802 - Efetuar Remessa</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['803Click'], { });">803 - Resumo do Caixa</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['804Click'], { });">804 - Efetuar Venda</a>
<a href="#", onClick="ajaxRequest(frmPrincipal.UniHTMLFrame1, ['805Click'], { });">805 - Cancelar Venda</a>
</div>
</li>
</ul>
</body>
</html>