CSS Menus suspensos
Menu suspenso básico
Crie
uma caixa suspensa que aparece quando o usuário move o mouse sobre um elemento.
Menu
suspenso
Crie
um menu suspenso que permita ao usuário escolher uma opção em uma lista:
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
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;
}
.dropdown-content a:hover
{background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Menu suspenso</h2>
<p>Mova o mouse sobre o botão
para abrir o menu suspenso.</p>
<div class="dropdown">
<button class="dropbtn">Suspenso</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<p> Observação: usamos
href="#" para links de teste. Em um site real, seriam
URLs..</p>
</body>
</html>
Conteúdo
suspenso alinhado à direita
menu suspenso vá da direita para a esquerda, em
vez da esquerda para a direita, adicione right: 0;
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color:
white;
padding:
16px;
font-size:
16px;
border:
none;
cursor:
pointer;
}
.dropdown {
position:
relative;
display:
inline-block;
}
.dropdown-content {
display:
none;
position:
absolute;
right: 0;
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;
}
.dropdown-content a:hover {background-color:
#f1f1f1;}
.dropdown:hover .dropdown-content {
display:
block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Conteúdo suspenso alinhado</h2>
<p>Determine se o conteúdo do menu suspenso
deve ir da esquerda para a direita ou da direita para a esquerda com as
propriedades esquerda e direita.</p>
<div class="dropdown"
style="float:left;">
<button
class="dropbtn">Esquerda</button>
<div
class="dropdown-content" style="left:0;">
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a
href="#">Link 3</a>
</div>
</div>
<div class="dropdown"
style="float:right;">
<button
class="dropbtn">Direita</button>
<div
class="dropdown-content">
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a
href="#">Link 3</a>
</div>
</div>
</body>
</html>
Imagem
suspensa
Como adicionar
uma imagem e outro conteúdo dentro da caixa suspensa.
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
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:hover .dropdown-content {
display: block;
}
.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<h2>Imagem suspensa</h2>
<p>Mova o mouse sobre a imagem abaixo para abrir o
conteúdo do menu suspenso.</p>
<div class="dropdown">
<img
src="img_5terre.jpg" alt="Cinque Terre" width="100"
height="50">
<div
class="dropdown-content">
<img
src="img_5terre.jpg" alt="Cinque Terre"
width="300" height="200">
<div
class="desc">Linda Cinque Terre</div>
</div>
</div>
</body>
</html>
Barra de navegação suspensa
Como adicionar um menu suspenso dentro de uma barra de navegação.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type:
none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:
#333;
}
li {
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:
red;
}
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: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a
href="#home">Home</a></li>
<li><a
href="#news">Notícia</a></li>
<li
class="dropdown">
<a
href="javascript:void(0)"
class="dropbtn">Suspenso</a>
<div
class="dropdown-content">
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a
href="#">Link 3</a>
</div>
</li>
</ul>
<h3>Menu suspenso dentro de uma barra de navegação</h3>
<p>Passe o mouse sobre o link "Dropdown"
para ver o menu suspenso.</p>
</body>
</html>