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

学习如何使用 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 ਕਲਾਸ ਨਾਲ ਵਾਸਤਵਿਕ ਨਿਊਟਡਿੰਗ ਮੈਨੂ ਨੂੰ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਹ ਮੂਲ ਰੂਪ ਵਿੱਚ ਛੁਪਾਈ ਹੋਈ ਹੈ ਅਤੇ ਮਾਉਸ ਲਿਆਉਣ 'ਤੇ ਦਿਖਾਈ ਦੇਵੇਗੀ (ਹੇਠ ਵਿੱਚ ਦੇਖੋ)। ਕਿਰਪਾ ਕਰਕੇ ਇਹ ਸੈਟਿੰਗ ਬਦਲੋ। ਸੁਝਾਅ: ਜੇਕਰ ਤੁਸੀਂ ਨਿਊਟਡਿੰਗ ਮੈਨੂ ਦੇ ਸਮਾਨਤਾ ਦੀ ਚੌੜਾਈ ਨੂੰ ਬਟਨ ਦੀ ਚੌੜਾਈ ਨਾਲ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਚੌੜਾਈ ਨੂੰ 100% ਸੈਟ ਕਰੋ (ਅਤੇ overflow:auto ਨਾਲ ਸਕਰੋਲ ਚਾਲੂ ਕਰਨ ਲਈ ਛੋਟੇ ਸਕਰੀਨ 'ਤੇ ਚਲਾਉਣਾ ਹੈ)।

ਨਾ ਹੀ ਬਰਾਡਰ ਵਰਤੀ ਹੈ, ਬਲਕਿ box-shadow ਅਟਰੀਬਿਊਟ ਨਾਲ ਨਿਊਟਡਿੰਗ ਮੈਨੂ ਨੂੰ ਇੱਕ 'ਕਾਰਡ' ਜਿਹਾ ਦਿਖਾਉਣਾ ਹੈ। ਅਸੀਂ ਇਸ ਦੇ ਨਾਲ-ਨਾਲ z-index ਨਿਊਟਡਿੰਗ ਮੈਨੂ ਨੂੰ ਹੋਰ ਇਲੈਕਟ੍ਰੌਨਿਕ ਅਣੂ ਦੇ ਪਹਿਲਾਂ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ。

:hover ਚੋਣਕਾਰ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਜਦੋਂ ਯੂਜ਼ਰ ਮਾਉਸ ਨੂੰ ਨਿਊਟਡਿੰਗ ਮੈਨੂ ਬਟਨ 'ਤੇ ਲਿਆਉਂਦਾ ਹੈ ਤਾਂ ਨਿਊਟਡਿੰਗ ਮੈਨੂ ਦਿਖਾਉਣ ਲਈ。

ਸਬੰਧਤ ਪੰਨੇ

教程：CSS 下拉菜单

教程：如何创建可点击的下拉菜单