I have the following menu:
How do I do when I click on a link it opens the content under the menu, always leaving it fixed?
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<head>
<style>
div.cont {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: #34495e;
clear: left;
text-align: center;
font-family: Titillium Web, sans-serif;
}
img{
width: 50px;
height: 50px;
}
body,
.menu,
.sub-menu {
margin: 0;
padding: 0;
}
.clearfix:after{
content: '.';
display: block;
clear: both;
height: 0;
line-height: 0;
font-size: 0;
visibility: hidden;
overflow: hidden;
}
.clearfix{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.menu,
.sub-menu {
list-style: none;
background: #000;
width: 100%;
}
.sub-menu {
background: #444;
}
.menu a {
text-decoration: none;
display: block;
padding: 10px;
color: #fff;
font-family: Titillium Web, sans-serif;
font-size: 11.5px;
font-weight: 200;
}
.menu li {
position: relative;
}
.menu > li {
float: left;
}
.menu > li:hover {
background: #444;
}
.menu li:hover > .sub-menu {
display: block;
}
.sub-menu {
display: none;
position: absolute;
min-width: 190px;
}
.sub-menu li:hover {
background: #555;
}
.sub-menu .sub-menu {
top: 0;
left: 100%;
}
</style>
</head>
<body>
<div class="cont">
<header>
<h1>PCI-HELP</h1>
</header>
</div>
<div class="menu-container">
<ul class="menu clearfix">
<li><a href="#">FORÇA VENDAS</a>
<!-- Nível 1 -->
<!-- submenu -->
<ul class="sub-menu clearfix">
<li><a href="#">Clientes</a>
<li><a href="#">Divisão</a>
<li><a href="#">Setor</a>
<li><a href="#">Grupo Faturamento</a>
<li><a href="#">Tipo Cliente</a>
</ul>
<li><a href="#">CADASTRO</a>
<ul class="sub-menu clearfix">
<li><a href="#">Empresa</a>
<li><a href="#">Produtos</a>
<li><a href="#">Fornecedores</a>
<li><a href="#">Grupo Produto</a>
<ul class="sub-menu">
<li><a href="#">Família</a></li>
<li><a href="#">Linha</a></li>
<li><a href="#">Categoria</a></li>
<li><a href="#">Aplicação</a></li>
<li><a href="#">Categoria E-Commerce</a></li>
<li><a href="#">Sub-Categoria E-Commerce</a></li>
<li><a href="#">Categoria PCI.APP</a></li>
<li><a href="#">Sub-Categoria PCI.APP</a></li>
</ul>
<li><a href="#">Logística</a>
<ul class="sub-menu">
<li><a href="#">Transportadores</a></li>
<li><a href="#">Países</a></li>
<li><a href="#">Municípios</a></li>
<li><a href="#">Manutenção CEP</a></li>
<li><a href="#">Fretes</a></li>
<li><a href="C:\Users\Igor.Carreiro\Desktop\Nova pasta\PCI.HELP\Cadastro\Logistica\Caixa Separação.html">Caixa Separação</a></li>
</ul>
<li><a href="#">Fiscal</a>
<ul class="sub-menu">
<li><a href="#">Estados</a></li>
<li><a href="#">Base Legal</a></li>
<li><a href="#">Base Legal por UF</a></li>
<li><a href="#">Transação Fiscal</a></li>
<li><a href="#">Desmembramento de TRC</a></li>
<li><a href="#">Imposto por NCM e Estado</a></li>
<li><a href="#">Imposto por Produto e Estado</a></li>
</ul>
<li><a href="#">Financeiro</a>
<ul class="sub-menu">
<li><a href="#">Formas de Pagamento</a></li>
<li><a href="#">Feriados</a></li>
<li><a href="#">Bancos</a></li>
</ul>
<li><a href="#">Ocorrência WEB</a>
<ul class="sub-menu">
<li><a href="#">Áreas</a></li>
<li><a href="#">Tipo de Ocorrências</a></li>
</ul>
<li><a href="#">Objetivos</a>
<ul class="sub-menu">
<li><a href="#">Divisão / Setor</a></li>
<li><a href="#">Ciclo</a></li>
</ul>
</ul>
<li><a href="#">PLANEJAMENTO</a>
<ul class="sub-menu clearfix">
<li><a href="#">Calendário</a></li>
<li><a href="#">Preços</a></li>
<li><a href="#">Montagem Kit</a></li>
<li><a href="#">Ofertas</a>
<ul class="sub-menu">
<li><a href="#">Oferta Produto</a></li>
<li><a href="#">Oferta Grupo</a></li>
<li><a href="#">Oferta Atividade</a></li>
<li><a href="#">Oferta Catálogo</a></li>
<li><a href="#">Oferta Valor</a></li>
</ul>
<li><a href="#">Material de Apoio</a></li>
<li><a href="#">Troca Frete</a></li>
<li><a href="#">Cota Produto</a></li>
<li><a href="#">Transferência</a>
<ul class="sub-menu">
<li><a href="#">Transferência de Divisão</a></li>
<li><a href="#">Transferência de Setor</a></li>
<li><a href="#">Transação de Indicante</a></li>
</ul>
</ul>
<li><a href="#">PEDIDOS</a>
<ul class="sub-menu clearfix">
<li><a href="#">Pedido Venda</a></li>
<li><a href="#">Pendências</a></li>
<li><a href="#">Reorder</a></li>
<li><a href="#">Picking List</a></li>
</ul>
<li><a href="#">FATURAMENTO</a>
<ul class="sub-menu clearfix">
<li><a href="#">Pré-Faturamento</a>
<ul class="sub-menu">
<li><a href="#">Conciliação de Pedidos</a></li>
<li><a href="#">Envio de Pedidos</a></li>
<li><a href="#">Acompanhamento</a></li>
<li><a href="#">Log Pré-Faturamento</a></li>
</ul>
<li><a href="#">Liberação de Pedidos</a>
<ul class="sub-menu">
<li><a href="#">Agendada</a></li>
<li><a href="#">Manual</a></li>
<li><a href="#">Estatística Faturamento</a></li>
<li><a href="#">Log Faturamento</a></li>
<li><a href="#">Modelo Log</a></li>
</ul>
<li><a href="#">Operações</a></li>
<li><a href="#">Notas Diversas</a></li>
<li><a href="#">Configurações NFe</a></li>
<li><a href="#">Notas de Débito</a>
<ul class="sub-menu">
<li><a href="#">Motivos</a></li>
<li><a href="#">Emitir / Cancelar</a></li>
<li><a href="#">Relatórios</a></li>
</ul>
</ul>
<li><a href="#">FINANCEIRO</a>
<ul class="sub-menu clearfix">
<li><a href="#">Lanc. Futuros</a></li>
<li><a href="#">Contas a Receber</a>
<ul class="sub-menu">
<li><a href="#">Gerenciamento de Títulos</a></li>
<li><a href="#">Arquivo CNAB Remessa</a></li>
<li><a href="#">Arquivo CNAB Retorno</a></li>
<li><a href="#">Ocorrência Financeiras</a></li>
</ul>
<li><a href="#">Contas a Pagar</a>
<ul class="sub-menu">
<li><a href="#">Gerenciamento de Títulos</a></li>
<li><a href="#">Arquivo CNAB Remessa</a></li>
<li><a href="#">Arquivo CNAB Retorno</a></li>
<li><a href="#">Ocorrência Financeiras</a></li>
</ul>
<li><a href="#">Cobrança</a>
<ul class="sub-menu">
<li><a href="#">Agências de Cobrança</a></li>
<li><a href="#">Regras de Parcelamento de Dívidas</a></li>
<li><a href="#">Limite de Negociação por Usuário</a></li>
<li><a href="#">Renegociação de Dívidas</a></li>
<li><a href="#">Modelo Carta de Cobrança</a></li>
<li><a href="#">Gestão Carta de Cobrança</a></li>
</ul>
</ul>
<li><a href="#">ESTOQUE</a>
<ul class="sub-menu clearfix">
<li><a href="#">Áreas</a></li>
<li><a href="#">Destinos</a></li>
<li><a href="#">Locais</a></li>
<li><a href="#">Movimentação</a>
<ul class="sub-menu">
<li><a href="#">Entrada / Retorno</a></li>
<li><a href="#">Saída</a></li>
<li><a href="#">Histórico</a></li>
</ul>
<li><a href="#">Inventário</a>
<ul class="sub-menu">
<li><a href="#">Contagem</a></li>
<li><a href="#">Digitação</a></li>
</ul>
</ul>
<li><a href="#">RELATÓRIOS</a>
<ul class="sub-menu clearfix">
<li><a href="#">Listagens</a></li>
<li><a href="#">Faturamento</a></li>
<li><a href="#">Estoque</a></li>
<li><a href="#">Exportação</a></li>
<li><a href="#">Gerencias</a>
<ul class="sub-menu">
<li><a href="#">Acompanhamento de Pedidos</a></li>
<li><a href="#">Rankings</a></li>
<li><a href="#">Indicações</a></li>
<li><a href="#">Análise de Produtos</a></li>
</ul>
</ul>
<li><a href="#">DASHBOARDS</a>
<li><a href="#">GERADOR BI</a>
<li><a href="#">INCENTIVOS</a>
<ul class="sub-menu clearfix">
<li><a href="#">Parâmetros</a>
<li><a href="#">Metas</a></li>
<li><a href="#">Brindes</a></li>
<li><a href="#">Apuração</a></li>
</ul>
<li><a href="#">VANTAGENS</a>
<ul class="sub-menu clearfix">
<li><a href="#">Milhagem</a>
<ul class="sub-menu">
<li><a href="#">Parâmetros</a></li>
<li><a href="#">Resgate</a></li>
</ul>
<li><a href="#">Fidelidade</a>
<ul class="sub-menu">
<li><a href="#">Anistia</a></li>
<li><a href="#">Premiação</a></li>
</ul>
</ul>
</ul>
</body>
</html>