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

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

純 CSS 可以建立強大且視覺吸引力的下拉式選單。本教學將引導您完成實現「向上」下拉式選單的步驟，該選單不是典型的向下開啟。

一開始，您已經建立了一個純 CSS 下拉選單選單滿足您的要求，除了向下開啟。我們的目標是修改你的程式碼，讓選單向上打開，從而成為一個「下拉」選單。

要實現這種向上打開的效果，你需要對你的CSS 規則稍作修改：

解決方案1：調整位置

在定位下拉式選單子選單的CSS規則中，新增bottom: 100%屬性。這實際上會將子選單移動到其父選單項目上方而不是下方。

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

解決方案 2：目標特定子選單

如果您想要防止向上開啟效果套用於所有子選單子選單，您可以使用更有針對性的 CSS 規則。在這種情況下，請修改規則以僅針對頂級選單項目的子選單。

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

解決方案 3：保留選單邊框

如果調整子選單的位置會影響其視覺外觀，您可以新增 border-bottom 屬性來維持所需的外觀。

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

透過實作這些解決方案之一，您可以使用純 CSS 實作所需的「下拉」選單。您可以在http://jsfiddle.net/W5FWW/4/找到現場演示。

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