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

学习如何使用 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>

توضیح مثال:

使用任何元素打开下拉菜单，例如 <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;
}
/* محتوای فروپاشی (به طور پیش‌فرض مخفی) */
.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;
}
/* لینک‌های فروپاشی داخل */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* تغییر رنگ لینک‌های فروپاشی هنگام قرار گرفتن موس روی آن */
.dropdown-content a:hover {background-color: #ddd;}
/* نمایش فروپاشی هنگام قرار گرفتن موس روی آن */
.dropdown:hover .dropdown-content {display: block;}
/* تغییر رنگ پس‌زمینه دکمه فروپاشی هنگام نمایش محتوای فروپاشی */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

آزمایش شخصی کنید

توضیح مثال:

ما برای دکمه فروپاشی با استفاده از رنگ پس‌زمینه، حاشیه داخلی و غیره، تنظیمات استایل انجام داده‌ایم.

.dropdown کلاس استفاده می‌شود position:relative، زمانی که می‌خواهیم محتوای فروپاشی را در زیر دکمه فروپاشی قرار دهیم (با استفاده از position:absolute)، این ضروری است.

.dropdown-content کلاس شامل فروپاشی واقعی است. به طور پیش‌فرض مخفی است و در صورت قرار گرفتن موس روی آن نمایش داده می‌شود (در زیر مشاهده می‌شود). توجه داشته باشید که عرض کمینه تنظیم شده به 160px است. لطفاً این تنظیم را تغییر دهید. راهنمایی: اگر می‌خواهید عرض محتوای فروپاشی با عرض دکمه فروپاشی یکسان باشد، عرض را به 100% تنظیم کنید (و overflow:auto برای فعال کردن اسکرول در صفحه‌های کوچک).

استفاده نکردیم، بلکه از box-shadow ویژگی برای نمایش فروپاشی مانند یک کارت. همچنین از z-index فروپاشی را در جلوی عناصر دیگر قرار دهید.

:hover انتخابگر برای نمایش فروپاشی هنگامی که کاربر موس خود را روی دکمه فروپاشی قرار می‌دهد.

صفحات مرتبط

آموزش:منو فهرست CSS

آموزش:چگونه منوی فهرست قابل کلیک ایجاد کنیم