🧭 Menus e Submenus CSS

Introdução

Menus são componentes fundamentais em páginas Web, pois permitem que o usuário navegue entre diferentes áreas do sistema ou site.

Com HTML criamos a estrutura e com CSS controlamos aparência, posicionamento e comportamento.

Estrutura Básica de um Menu

<nav>

 <ul>

   <li>

     <a href="#">Home</a>

   </li>

 </ul>

</nav>

A tag <nav> representa uma área de navegação.

Elementos de um Menu

Removendo Marcadores

Menus normalmente não utilizam marcadores de lista.

ul {

list-style:none;

}

Menu Horizontal

Utilizamos flexbox para criar menus modernos.

ul {

display:flex;

gap:20px;

}

Estilizando Links do Menu

nav a {

text-decoration:none;

color:white;

padding:15px;

}

Menu com Fundo

nav {

background:#1f4e79;

}


nav a {

color:white;

}

Efeito Hover no Menu

O estado hover altera o estilo quando o usuário passa o mouse.

nav a:hover {

background:#163a5c;

}

O que é um Submenu?

Submenu é um menu secundário exibido dentro de uma opção principal.

Menu

 ├── Cursos

 │      ├── HTML

 │      └── CSS

 │

 └── Contato

Estrutura HTML de Submenu

<li>

Cursos

 <ul>

   <li>HTML</li>

   <li>CSS</li>

 </ul>

</li>

Escondendo o Submenu

.submenu {

display:none;

}

Inicialmente o submenu fica oculto.

Mostrando Submenu com Hover

.menu li:hover .submenu {

display:block;

}

Quando o usuário passa o mouse, o submenu aparece.

Posicionamento do Submenu

.menu {

position:relative;

}


.submenu {

position:absolute;

top:100%;

}

Exemplo Completo

nav ul {

display:flex;

}


nav li {

position:relative;

}


.submenu {

display:none;

position:absolute;

}


li:hover .submenu {

display:block;

}

Tipos de Menus

Boas Práticas

• Manter menu simples.
• Organizar opções por categorias.
• Garantir acessibilidade.
• Usar bons contrastes.
• Criar versão responsiva.

Erros Comuns

Resumo Final