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

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

下拉菜单

下拉菜单是一种可切换的菜单,允许用户从预定义列表中选择一个值:

Prova själv

创建可悬停的下拉菜单

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

第一步 - 添加 HTML:

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

Exempel på förklaring:

使用任何元素打开下拉菜单,例如 <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;
}
/* Rullgardinsinnehåll (som standard dolt) */
.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;
}
/* Länkar inom rullgardinsmenyn */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Ändra färgen på länkar i rullgardinsmenyn när muspekaren hovrar över */
.dropdown-content a:hover {background-color: #ddd;}
/* Visa rullgardinsmenyn när muspekaren hovrar över */
.dropdown:hover .dropdown-content {display: block;}
/* Ändra bakgrundsfärgen på rullgardinsknappen när innehållet visas */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

Prova själv

Exempel på förklaring:

Vi har redan ställt in stilar för rullgardinsknappen med bakgrundsfärg, inre marginaler m.m.

.dropdown klassen används position:relativenär vi vill placera rullgardinsmenyns innehåll precis under rullgardinsknappen (använd position:absolute)

.dropdown-content Klassen innehåller den faktiska rullgardinsmenyn. Den är som standard dold och kommer att visas vid muspekarens överdragning (se nedan).Observera att minsta bredd är satt till 160px. Vänligen justera denna inställning. Tips: Om du vill att rullgardinsmenyns innehålls bredd ska vara lika bred som rullgardinsknappen, sätt bredden till 100% (och sätt overflow:auto för att aktivera rullning på små skärmar).

Vi använder inte kanter utan box-shadow egenskap för att göra rullgardinsmenyn ser ut som en 'karta'. Vi använder också z-index Placera rullgardinsmenyn framför andra element.

:hover Väljare används för att visa rullgardinsmenyn när användaren flyttar muspekaren över rullgardinsknappen.

Högerjusterad rullgardinslista

Prova själv

Navigationsfältets rullgardinslista

Prova själv

Relaterade sidor

Tutorials:CSS rullgardin

Tutorials:Hur man skapar en klickbar rullgardin