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

学习如何使用 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 ویژگی برای نمایش لیست پایین مانند یک کارت. ما همچنین از ز-ایندر-ایکس لیست پایین را در جلوی عناصر دیگر قرار دهید.

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

صفحات مرتبطة

آموزش:منو فليپ CSS

آموزش:کيف به عمل درآوریم: منوی فليپ قابل کلیک