如何仅使用 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中文网其他相关文章！