Help with submenu CSS

Question

Help with submenu CSS

Asked 7 years, 1 month ago

Viewed 88 times

0

I need to create a submenu in the "Reports" category but I’m not getting it at all. I am not finding a correct way to create this second level. I appreciate 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>

1 answer

Browser other questions tagged css submenu

You are not signed in. Login or sign up in order to post.

by Maurício Júnior • **391** points · Answer 1 · 2017-10-09T20:50:00+00:00

Hello, your dropdown menu item needs to have a position: relative and submenu, which is inside this item needs to have position Absolute. I made this little example.

<style>
ul.menu li{
  display: inline-block;
  background: green;
  padding: 5px;
}

.dropdown{
  position: relative;
}

.dropdown ul{
  position: absolute;
  left: 0;
  display: none;
  margin: 0;
  padding: 0;
}
.dropdown ul li{
  width: 100%;
}

.dropdown:hover ul{
  display: block;
  width: 100%;
  color: #fff;
}

</style>
<ul class="menu">
  <li>Menu 001</li>

  <li class="dropdown">Menu 002
    <ul>
      <li>menu 2.1</li>
      <li>menu 2.2</li>
      <li>menu 2.3 </li>
    </ul>
  </li>
</ul>