Como Criar um Menu horizontal Drop Down com 4 até niveis utilizando CSS.
CSS - Criar menu drop down com CSS em até 4 níveisHoje Iremos ver como criar um menu horizontal drop down de maneira simples e bem rápida utilizando apenas CSS.
Mas o que vem a ser um menu Drop Down?
Quando possuimos uma grande quantidades de páginas e precisamos que estas apareçam no nosso menu, se não pensarmos na navegação e organização, podemos atrapalhar e confundir o usuário do site.
Pra isso vamos agrupar as páginas fazendo com que em uma linha tenha as páginas mais importantes, e conforme passamos o mouse nos links novos menus vão se abrindo
Veja abaixo o exemplo:
Nesse temos um menu de 2 Niveis, ou seja temos o nivel principal ou primeiro nivel que é o que está visivel, e o segundo nível ou primeiro drop down, é o que aparece quando passamos o mouse em cima de um link do menu principal.
O próximo exemplo mostra que podemos utilizar quantos subniveis precisarmos (mesmo sendo um exemplo de 4 níveis).
Para acrescentarmos mais niveis é sempre o mesmo procedimento, só acrescentarmos mais um conjunto de ul com uma classe especifica e repetir as configurações de css.
<style type="text/css">
/*Configurações Padrões*/
ul.menu,
.menu li,
.menu a {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
ul.menu ul {
position: absolute;
display: none;
box-shadow: 3px 3px 2px #333;
}
/* Configurações nivel 1*/
ul.menu {
float: left;
font-family: Verdana, Geneva, sans-serif;
font-size: 15px;
border-radius: 5px;
padding: 0 5px;
}
.menu li {
float: left;
width: auto;
position: relative;
}
.menu li a {
display: block;
padding: 0 20px;
line-height: 45px;
height: 45px;
float: left;
transition: all 0.1s linear;
}
/* Configurações nivel 2*/
.menu li:hover>ul.submenu-1 {
display: block;
top: 45px;
left: 0;
padding: 5px;
width: 200px;
border-radius: 0 0 5px 5px;
}
.menu ul.submenu-1 a {
width: 160px;
padding: 0 20px;
border-radius: 5px;
}
/* Configurações nivel 2*/
.menu li:hover>ul.submenu-2 {
display: block;
top: 0;
left: 195px;
padding: 5px;
width: 200px;
border-radius: 0 5px 5px 5px;
}
.menu ul.submenu-2 a {
width: 160px;
padding: 0 20px;
border-radius: 5px;
}
/* Configurações nivel 3*/
.menu li:hover>ul.submenu-3 {
display: block;
top: 0;
left: 195px;
padding: 5px;
width: 200px;
border-radius: 0 5px 5px 5px;
}
.menu ul.submenu-3 a {
width: 160px;
padding: 0 20px;
border-radius: 5px;
}
/*Configurações de cores*/
/*nivel 1*/
.menu {
background: #CCC;
}
.menu a {
color: #000;
}
.menu li:hover>a {
background: #999;
color: #fff;
}
/*nivel 2*/
.submenu-1 {
background: #999;
}
.submenu-1 a {
color: #fff;
}
.submenu-1 li:hover>a {
background: #666;
}
/*nivel 3*/
.submenu-2 {
background: #666;
}
.submenu-2 a {
color: #fff;
}
.submenu-2 li:hover>a {
background: #333;
}
/*nivel 3*/
.submenu-3 {
background: #333;
}
.submenu-3 a {
color: #fff;
}
.submenu-3 li:hover>a {
background: #000;
}
</style>
<ul class="menu">
<!-- Esse é o 1 nivel ou o nivel principal -->
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul class="submenu-1">
<!-- Esse é o 2 nivel ou o primeiro Drop Down -->
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a>
<ul class="submenu-2">
<!-- Esse é o 3 nivel ou o Segundo Drop Down -->
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a>
<ul class="submenu-3">
<!-- Esse é o 4 nivel ou o Terceiro Drop Down -->
<li><a href="#">Submenu 7</a></li>
<li><a href="#">Submenu 8</a></li>
<li><a href="#">Submenu 9</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
Criação e Diagramação
