如何建立 CSS 下拉選單而不是下拉選單？

使用純CSS 的下拉式選單

本文討論如何自訂使用純CSS 建立的下拉式選單，使其成為「下拉」選單而不是“下拉”選單。功能表列位於佈局的底部，問題是如何讓它向上打開。

解決方案

建立下拉式選單， CSS 規則需要調整。

示範1:

新增底部：100%；現有 CSS 規則：

#menu:hover ul li:hover ul {
    bottom: 100%; /* added this attribute */
}

示範2：

要防止子選單受到下拉行為的影響，請使用以下規則：

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

示範3:

恢復下拉式選單周圍的邊框：

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

這裡是一個JSFiddle示範：http://jsfiddle.net/W5FWW/4/

以上是如何建立 CSS 下拉選單而不是下拉選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！