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

Barbara Streisand

發布： 2024-12-11 01:06:09

原創

670 人瀏覽過

How Can I Create a CSS Drop-Up Menu Instead of a Drop-Down Menu?

使用純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中文網其他相關文章！

來源：php.cn

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章