Menú desplegable de CSS

Cree una lista desplegable suspendible usando CSS.

Demostración: Caso de menú desplegable

Ejemplo

Mueva el puntero del ratón sobre el siguiente ejemplo:

Texto desplegable

Hello World!

Enlace 1 Enlace 2 Enlace 3
Imagen:café
café
Café

Menú desplegable básico

Cree un cuadro desplegable que se muestra cuando el usuario pasa el ratón sobre el elemento.

Ejemplo

<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);
  padding: 12px 16px;
  z-index: 1;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

Prueba personalmente

Ejemplo de explicación:

HTML

Abra el contenido del menú desplegable usando cualquier elemento, como <span> o el elemento <button>.

Cree el contenido desplegable usando un elemento contenedor (como <div>) y agregue cualquier contenido.

Envuelva estos elementos con un elemento <div>, y use CSS para posicionar correctamente el contenido desplegable.

CSS

.dropdown La clase se usa position:relative，cuando queremos que el contenido desplegable se coloque justo debajo del botón desplegable (usando position:absolute）es necesario usar esta clase.

.dropdown-content La clase guarda el contenido real del menú desplegable. Por defecto, está oculto y se mostrará al pasar el ratón (véase a continuación). Nota:min-width Establecido en 160px. Puede cambiar esta configuración en cualquier momento. Sugerencia: Si desea que el ancho del contenido desplegable sea igual al del botón desplegable, configure el ancho en 100％ (configuración overflow:auto Se puede realizar el desplazamiento en la pantalla pequeña.

Usamos CSS sombra de cuadro propiedades, en lugar de bordes, para que el menú desplegable se vea como una "carta".

cuando el usuario coloca el ratón sobre el botón desplegable:hover El selector se utiliza para mostrar el menú desplegable.

Menú desplegable

Cree un menú desplegable y permita que el usuario seleccione una opción de la lista:

Enlace 1 Enlace 2 Enlace 3

本例与上例相似，除了我们在下拉框内添加链接并为其设置了样式，以此匹配下拉按钮的样式：

Ejemplo

<style>
/* 设置下拉按钮的样式 */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* 容器 <div> - 需要放置下拉内容 */
.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>
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Enlace 1</a>
    <a href="#">Enlace 2</a>
    <a href="#">Enlace 3</a>
  </div>
</div>

Prueba personalmente

Contenido del menú desplegable alineado a la derecha

Enlace 1 Enlace 2 Enlace 3
Enlace 1 Enlace 2 Enlace 3

Si desea que el menú desplegable se despliegue de derecha a izquierda en lugar de de izquierda a derecha, agregue right: 0;:

Ejemplo

.dropdown-content {
  right: 0;
}

Prueba personalmente

Más ejemplos

1 - Imagen desplegable

Cómo agregar imágenes y otros contenido en el cuadro desplegable.

Mueva el puntero del ratón sobre la imagen:

café
café
Café

Prueba personalmente

2 - Navegación desplegable

Cómo agregar menús desplegables en la barra de navegación.

Prueba personalmente