如何僅使用 CSS 建立向上開啟的下拉式選單？

使用純CSS向上打開的下拉式選單

僅使用以下方法將下拉式選單轉換為向上開啟的「下拉」選單的挑戰CSS 需要對其樣式進行輕微修改。以下建議的CSS將實現這種效果：

#menu:hover ul li:hover ul {
  position: absolute;
  margin-top: 1px;
  font: 10px;
  bottom: 100%;
}

說明

透過新增bottom: 100%;根據上述規則，子選單將位於其父選單項目的底部，並在懸停時顯示為“下降”。

其他細化

為了獲得更精緻的效果，您可以透過添加以下內容來消除子選單之間的重疊：

#menu>ul>li:hover>ul {
  bottom: 100%;
}

這可確保僅打開懸停菜單一項目的子選單

Demo

想要體驗下拉效果，可以參考以下demo：http://jsfiddle.net/W5FWW/4/。

保留邊框

如果原來的選單有邊框，可以透過以下方式恢復新增：

#menu>ul>li:hover>ul {
  bottom: 100%;
  border-bottom: 1px solid transparent
}

這將保留邊框，同時保留下拉功能。

以上是如何僅使用 CSS 建立向上開啟的下拉式選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！