如何僅使用 CSS 建立多層下拉式選單？-css教學-PHP中文網

如何僅使用 CSS 建立多層下拉式選單？

Susan Sarandon

發布： 2024-11-29 20:57:13

原創

170 人瀏覽過

How Can I Create Multi-Level Drop-Down Menus Using Only CSS?

使用純CSS 建立多層下拉式選單

純CSS 多級下拉式選單提供了乾淨且易於存取的網站上組織複雜導航結構的方法。雖然存在多種方法，但最佳解決方案根據所需的美觀和功能而有所不同。

一種有效的技術涉及利用嵌套列表結構並絕對定位子選單：

.third-level-menu
{
    -
    position: absolute;
    top: 0;
    right: 150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

登入後複製

這程式碼定義了第三級子選單，該子選單將位於其父選單項的右邊。

.second-level-menu
{
    -
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

登入後複製

類似地，此程式碼定義二級子選單，該子選單將位於其父選單項目的下方。

.top-level-menu
{
    -
    list-style: none;
    padding: 0;
    margin: 0;
}

登入後複製

此程式碼定義頂層選單，其中將包含父選單項目。

要在父選單項目停留時顯示子選單：

.top-level-menu li:hover > ul
{
    -
    /* On hover, display the next level's menu */
    display: inline;
}

登入後複製

此外，樣式可以套用於選單連結和清單項目視覺自訂。

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