WordPress 多级下拉菜单样式定制指南

<ul class="main-menu-links">
    <li><a href="#">主菜单项</a>
        <ul class="sub-menu"> <!-- 第一级子菜单 -->
            <li><a href="#">子菜单项 1</a></li>
            <li class="menu-item-has-children"><a href="#">子菜单项 2</a>
                <ul class="sub-menu"> <!-- 第二级子菜单 -->
                    <li><a href="#">子子菜单项 1</a></li>
                    <li class="menu-item-has-children"><a href="#">子子菜单项 2</a>
                        <ul class="sub-menu"> <!-- 第三级子菜单 -->
                            <li><a href="#">子子子菜单项 1</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

/* --------------------------------------------------- */
/* 主菜单容器样式 (示例) */
/* --------------------------------------------------- */
.main-menu-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* 示例：如果主菜单是水平排列 */
    background: #001e3b;
}

.main-menu-links > li {
    position: relative; /* 确保子菜单定位正确 */
    padding: 10px 15px;
}

.main-menu-links > li > a {
    color: #fff;
    text-decoration: none;
    display: block;
}

/* --------------------------------------------------- */
/* 第一级子菜单 (默认由 WordPress 输出为 .sub-menu) */
/* --------------------------------------------------- */
.main-menu-links .sub-menu { /* 针对主菜单下的直接子菜单 */
    display: none; /* 默认隐藏 */
    position: absolute;
    top: 100%; /* 定位在父菜单项下方 */
    left: 0;
    z-index: 999;
    min-width: 180px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to right, #001e3b, #171717);
    border-top: 2px solid #0072dd;
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-menu-links li:hover > .sub-menu {
    display: block; /* 鼠标悬停时显示 */
}

.main-menu-links .sub-menu li {
    width: 100%; /* 子菜单项宽度 */
    position: relative; /* 为下一级子菜单定位做准备 */
}

.main-menu-links .sub-menu li a {
    padding: 10px 15px;
    display: block;
    color: #eee;
    text-decoration: none;
    white-space: nowrap; /* 防止菜单项文本换行 */
}

.main-menu-links .sub-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------- */
/* 第二级子菜单 (ul ul) */
/* --------------------------------------------------- */
.main-menu-links .sub-menu .sub-menu { /* 或者更简洁地写成 .main-menu-links ul ul */
    top: 0; /* 定位在父菜单项的顶部对齐 */
    left: 100%; /* 定位在父菜单项的右侧 */
    border-radius: 0 5px 5px 0; /* 示例：不同的圆角 */
    border-top: none; /* 移除顶部边框，避免重复 */
    border-left: 2px solid #0072dd; /* 示例：左侧边框 */
    z-index: 1000; /* 确保层级高于第一级子菜单 */
    background: linear-gradient(to right, #171717, #001e3b); /* 示例：不同背景色 */
}

.main-menu-links .sub-menu li:hover > .sub-menu {
    display: block; /* 鼠标悬停时显示第二级子菜单 */
}

/* --------------------------------------------------- */
/* 第三级子菜单 (ul ul ul) */
/* --------------------------------------------------- */
.main-menu-links .sub-menu .sub-menu .sub-menu { /* 或者更简洁地写成 .main-menu-links ul ul ul */
    left: 100%; /* 定位在父菜单项的右侧 */
    top: 0; /* 定位在父菜单项的顶部对齐 */
    border-radius: 0 5px 5px 0;
    border-left: 2px solid #ff5722; /* 示例：不同颜色边框 */
    z-index: 1001; /* 确保层级高于第二级子菜单 */
    background: linear-gradient(to right, #333, #111); /* 示例：更深背景色 */
}

.main-menu-links .sub-menu .sub-menu li:hover > .sub-menu {
    display: block; /* 鼠标悬停时显示第三级子菜单 */
}

function my_theme_setup() {
    register_nav_menus( array(
        'menu-1' => esc_html__( '主菜单', 'your-theme-textdomain' ),
        // 可以注册更多菜单位置
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

<?php 
    wp_nav_menu(
        array(
            'theme_location'    => 'menu-1', // 对应注册的菜单位置
            'container'         => false, // 不使用额外的 div 容器
            'items_wrap'        => '<ul id="%1$s" class="main-menu-links %2$s">%3$s</ul>', // 自定义主 ul 的类名
            'depth'             => 3, // 显示所有三级菜单
        )
    );
?>