English 中文 繁體中文 Русский Français Deutsch Español Português 日本語 한국어 Italiano عربي हिंदी বাংলা Bahasa Malaysia မြန်မာ Tiếng Việt ภาษาไทย ລາວ Bahasa Indonesia اردو Hausa Język polski ਪੰਜਾਬੀ Svenska Dansk Nederlands Türkçe suom. Ελληνικά فارسی Kiswahili తెలుగు wikang Galu

CSS ਡਾਊਨ ਮੈਨੂ

• پچھلے پیج CSS ਹੌਰਿਜ਼ਨਟਲ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ
• پچھلے پیج CSS ਚਿੱਤਰ ਲਾਇਬ੍ਰੇਰੀ

使用 CSS 创建可悬停的下拉列表。

演示：下拉式案例

实例

请把鼠标指针移动到下面的例子上：

下拉文本

Hello World!

ਡਰਾਪ-ਡਾਊਨ ਮੇਨੂ

Link 1 Link 2 Link 3

图片：

Coffee

基础的下拉菜单

创建当用户将鼠标移到元素上时出现的下拉框。

实例

<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>
  

亲自试一试

例子解释：

HTML

使用任何元素打开下拉菜单内容，例如 <span> 或 <button> 元素。

使用容器元素（如 <div>）创建下拉内容，并在其中添加任何内容。

用 <div> 元素包围这些元素，使用 CSS 正确定位下拉内容。

CSS

.dropdown 类使用 position:relative，当我们希望将下拉内容放置在下拉按钮的正下方（使用 position:absolute）时，需要使用该类。

.dropdown-content 类保存实际的下拉菜单内容。默认情况下它是隐藏的，并将在悬停时显示（请看下文）。请注意，min-width 设置为 160px。可随时更改此设置。提示：如果您希望下拉内容的宽度与下拉按钮的宽度一样，请将宽度设置为 100％（设置 overflow:auto 可实现在小屏幕上滚动）。

ਅਸੀਂ ਸੀਐੱਸਐੱਸ ਵਿੱਚ ਵਰਤੇ ਹਨ box-shadow ਲੋਕੇਸ਼ਨ, ਨਹੀਂ ਕਿ ਬਾਰੀਰ, ਇਸ ਤਰ੍ਹਾਂ ਡਰਾਪ-ਡਾਊਨ ਮੇਨੂ ਇੱਕ 'ਕਾਰਡ' ਜਿਹਾ ਦਿਖਾਈ ਦੇਵੇਗਾ。

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

ਡਰਾਪ-ਡਾਊਨ ਮੇਨੂ

ਇੱਕ ਡਰਾਪ-ਡਾਊਨ ਮੇਨੂ ਬਣਾਓ, ਅਤੇ ਯੂਜ਼ਰ ਨੂੰ ਲਿਸਟ ਵਿੱਚੋਂ ਇੱਕ ਵਿਕਲਪ ਚੁਣਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿਓ:

ਇਹ ਉਦਾਹਰਣ ਉੱਪਰਲੇ ਉਦਾਹਰਣ ਨਾਲ ਸਮਾਨ ਹੈ, ਮੈਂਨੂੰ ਲਗਾਇਆ ਹੈ ਕਿ ਅਸੀਂ ਡਰਾਪ-ਡਾਊਨ ਬਕਸ ਵਿੱਚ ਲਿੰਕ ਜੋੜੇ ਹਨ ਅਤੇ ਉਸ ਦੇ ਸਟਾਈਲ ਨੂੰ ਮੇਲਜੋਲ ਦਿੱਤਾ ਹੈ:

实例

<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">
    Link 1
    Link 2
    Link 3
  

右对齐的下拉菜单内容

如果希望下拉菜单从右到左而不是从左到右，请添加 right: 0;：

实例

.dropdown-content {
  right: 0;
}

亲自试一试

کو ڈیوائز کا مینو اور مینو کا مینو صرف تربیت اور ٹیسٹ کیلئے فراہم کیا گیا ہے، صحت کا اطمینان نہیں دیا جاتا ہے۔ اس ویب سائٹ کی استعمال سے آئی خطرات اس ویب سائٹ سے منسلک نہیں ہیں۔ حقوق کی مالکیت، تمام حقوق محفوظ ہیں。

کو ڈیوائز کی اعلان کو ڈیوائز کی مدد استعمال شرط پریویسی شرط