如何创建：可悬停的下拉菜单

学习如何使用 CSS 创建可悬停的下拉菜单。

创建可悬停的下拉菜单

创建一个下拉菜单，当用户将鼠标移动到元素上时显示该菜单。

第一步 - 添加 HTML：

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Ejemplo de explicación:

使用任何元素打开下拉菜单，例如 <button>、<a> 或 <p> 元素。

使用容器元素（如 <div>）创建下拉菜单，并在其中添加下拉菜单链接。

使用 <div> 元素将按钮和 <div> 包装起来，以便使用 CSS 正确定位下拉菜单。

第二步 - 添加 CSS：

/* 下拉按钮 */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* 容器<div> - 用于定位下拉菜单内容 */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Contenido desplegable (oculto por defecto) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Enlaces dentro del menú desplegable */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Cambia el color del enlace del menú desplegable al pasar el mouse por encima */
.dropdown-content a:hover {background-color: #ddd;}
/* Muestra el menú desplegable al pasar el mouse por encima */
.dropdown:hover .dropdown-content {display: block;}
/* Cambia el color de fondo del botón desplegable al mostrar el contenido desplegable */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

Prueba personalmente

Ejemplo de explicación:

Hemos establecido estilos para el botón del menú desplegable con colores de fondo, márgenes internos, etc.

.dropdown la clase position:relativecuando queremos colocar el contenido del menú desplegable justo debajo del botón del menú desplegable (usando position:absolute), es necesario.

.dropdown-content La clase contiene el menú desplegable real. Por defecto, está oculto y se mostrará cuando el mouse se posicione sobre él (ver a continuación). Tenga en cuenta que el ancho mínimo se establece en 160px. Puede cambiar esta configuración libremente. Sugerencia: si desea que el ancho del contenido del menú desplegable sea igual al del botón del menú desplegable, configure el ancho en 100% (y configure overflow:auto para activar el desplazamiento en la pantalla pequeña).

No utilizamos bordes, sino box-shadow Atributo para hacer que el menú desplegable se vea como una tarjeta. Además, utilizamos z-index Coloca el menú desplegable delante de otros elementos.

:hover Selector utilizado para mostrar el menú desplegable cuando el usuario coloca el mouse sobre el botón del menú desplegable.

Páginas relacionadas

Tutoriales:menú desplegable de CSS

Tutoriales:¿Cómo crear un menú desplegable clickeable?