如何创建：上拉菜单

学习如何使用 CSS 创建上拉菜单。

创建可悬停的上拉菜单

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

第一步 - 添加 HTML：

<div class="dropup">
  <button class="dropbtn">Dropup</button>
  <div class="dropup-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: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* 상하이 메뉴 내용을 정위치하기 위해 필요한 요소 <div> */
.dropup {
  position: relative;
  display: inline-block;
}
/* 상하이 메뉴 내용(기본적으로 숨겨짐) */
.dropup-content {
  display: none;
  position: absolute;
  bottom: 50px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* 下拉菜单中的链接 */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* 마우스를 올릴 때下拉链接的颜色 변경 */
.dropup-content a:hover {background-color: #ddd}
/* 마우스를 올릴 때 상하이 메뉴 표시 */
.dropup:hover .dropup-content {
  display: block;
}
/* 상하이 메뉴 내용이 표시될 때 상하이 버튼의 배경색 변경 */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

직접 시도해보세요

예제 설명:

우리는 상하이 버튼에 배경색, 내간격 등의 스타일을 설정했습니다.

.dropup 클래스를 사용합니다 position:relative를 사용하여 상하이 메뉴 내용을 상하이 버튼의 위에 배치하고 싶을 때( position:absolute는 필수입니다.

.dropup-content 클래스는 실제 상하이 메뉴를 포함합니다. 기본적으로 숨겨져 있으며 마우스를 올릴 때 표시됩니다(아래 참조). 주의할 점: 최소 너비는 160px로 설정되어 있습니다. 필요에 따라 값을 변경할 수 있습니다. 힌트: 상하이 메뉴의 내용 너비가 상하이 버튼과 같게 하고 싶다면 너비를 100%로 설정하고(소형 디스플레이에서 사용) overflow:auto 스크롤을 활성화하도록 합니다).

밴드를 사용하지 않고 box-shadow 속성을 사용하여 상하이 메뉴가 '카드'처럼 보이게 합니다. 또한 z-index 상하이 맨 앞에 다른 요소들 앞에 상하이 메뉴를 배치하십시오.

:hover 드래그 다운 버튼에 마우스를 올리면 드래그 다운 메뉴가 표시됩니다.