如何將 CSS 下拉式選單轉換為下拉式選單？

垂直下拉選單的drop-up 子選單：用純CSS 實作

對於drop-down 選單來說，變身為drop -up 選單很常見，尤其是當選單列位於佈局底部時。要實現這一點，我們需要對 CSS 樣式進行一些修改。

問題：將drop-down 選單轉換為drop-up 選單

對於給定的drop-down 選單CSS，如何修改樣式以使其變成drop -up 菜單？

解決方案：調整#menu:hover ul li:hover ul 規則

可以透過新增bottom: 100%; 屬性到#menu:hover ul li:hover ul 規則來實作drop-up 功能。

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

可選改進：僅在頂層子選單套用 drop-up

為了防止子選單也採用 drop-up效果，可以加入以下規則：

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

其他考慮因素：恢復邊框

新增 bottom: 100%; 屬性可能會移除子選單的邊框。要恢復邊框，可以新增以下屬性：

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

示範

以下是一些示範此技術的範例：

• [ Demo 1](https://jsfiddle.net/W5FWW/4/)
• [Demo 2](https://jsfiddle.net/zyp6c/)
• [Demo 3](https ://jsfiddle.net/phkj20zo/)

以上是如何將 CSS 下拉式選單轉換為下拉式選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！