如何仅使用 CSS 创建多级下拉菜单？-css教程-PHP中文网

如何仅使用 CSS 创建多级下拉菜单？

Mary-Kate Olsen

发布： 2024-11-29 20:27:13

原创

270 人浏览过

How Can I Create a Multi-Level Dropdown Menu Using Only CSS?

纯 CSS 多级下拉菜单：综合指南

使用 CSS 创建多级下拉菜单可以是一种强大的组织技术复杂的导航结构。虽然旧的方法可能仍然存在，但本文提出了一种使用纯 CSS 实现此功能的现代且高效的方法。

在 CSS 中构建多级菜单的关键在于操作菜单的位置和显示属性项目。通过利用下拉菜单的绝对定位并使用显示属性控制其可见性，可以创建动态且可自定义的菜单。

下面提供的代码说明了三级下拉菜单结构。顶级菜单包含四个主要类别，每个类别都有一个潜在的下拉菜单。第二层和第三层从各自的父项垂直延伸，提供清晰的分层视图。

.third-level-menu {
    /* Position the third level menu absolutely within its parent */
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menu > li {
    /* Define the appearance and height of third level menu items */
    height: 30px;
    background: #999999;
}

.third-level-menu > li:hover {
    /* Change background color on hover */
    background: #CCCCCC;
}

.second-level-menu {
    /* Position the second level menu absolutely within its parent */
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.second-level-menu > li {
    /* Position and define the appearance of second level menu items */
    position: relative;
    height: 30px;
    background: #999999;
}

.second-level-menu > li:hover {
    /* Change background color on hover */
    background: #CCCCCC;
}

.top-level-menu {
    /* Style the top level menu as a horizontal list */
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-level-menu > li {
    /* Position and define the appearance of top level menu items */
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: #999999;
}

.top-level-menu > li:hover {
    /* Change background color on hover */
    background: #CCCCCC;
}

.top-level-menu li:hover > ul {
    /* Display the next level menu on hover */
    display: inline;
}

/* Styles for the menu links */

.top-level-menu a {
    /* Styling for all links within the menu */
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0 0 0 10px;

    /* Stretch the link to cover the entire menu item */
    display: block;
    line-height: 30px;
}

.top-level-menu a:hover {
    /* Change link color on hover */
    color: #000000;
}

登录后复制

要在 HTML 中实现此菜单，请使用以下标记：