WordPress 多级下拉菜单样式定制：摆脱通用类名限制的CSS技巧

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

/* 隐藏所有子菜单，并设置基本样式 */
.main-menu-links ul {
    display: none; /* 默认隐藏 */
    position: absolute; /* 绝对定位，脱离文档流 */
    z-index: 999; /* 确保在其他内容之上 */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to right, #001e3b, #171717); /* 背景渐变 */
    border-top: 2px solid #0072dd; /* 顶部边框 */
    top: 100%; /* 相对于父级li的底部 */
    left: 0; /* 相对于父级li的左侧 */
    min-width: 180px; /* 最小宽度 */
    list-style: none; /* 移除列表点 */
    padding: 0; /* 移除内边距 */
    margin: 0; /* 移除外边距 */
}

/* 针对所有子菜单的li元素 */
.main-menu-links ul li {
    position: relative; /* 相对定位，用于子子菜单的定位 */
    width: 100%; /* 填充父级ul的宽度 */
}

/* 子菜单项的链接样式 */
.main-menu-links ul li a {
    padding: 10px 15px; /* 内边距 */
    display: block; /* 块级显示，可点击区域更大 */
    white-space: nowrap; /* 防止文本换行 */
    color: #fff; /* 链接颜色 */
    text-decoration: none; /* 移除下划线 */
}

/* 鼠标悬停在主菜单项上时，显示第一级子菜单 */
.main-menu-links > li:hover > ul {
    display: block;
    top: 100%; /* 确保在主菜单项下方显示 */
    left: 0;
}

/* 鼠标悬停在任何带有子菜单的li上时，显示其直接子ul */
.main-menu-links ul li:hover > ul {
    display: block;
    top: 0; /* 相对于父级li的顶部对齐 */
    left: 100%; /* 水平向右展开 */
    border-radius: 5px; /* 圆角 */
}

/* 针对第二级子菜单（即 ul > ul）的特殊样式 */
.main-menu-links ul ul {
    /* 继承通用子菜单样式，但可以覆盖 */
    top: 0; /* 第二级子菜单相对于其父li的顶部对齐 */
    left: 100%; /* 水平向右展开 */
    min-width: 180px; /* 保持宽度一致 */
}

/* 针对第三级子菜单（即 ul > ul > ul）的特殊样式 */
.main-menu-links ul ul ul {
    /* 继承通用子菜单样式，但可以覆盖 */
    top: 0; /* 第三级子菜单相对于其父li的顶部对齐 */
    left: 100%; /* 水平向右展开 */
    min-width: 180px; /* 保持宽度一致 */
}

/* 示例：调整特定层级子菜单的背景或边框 */
/* .main-menu-links ul ul {
    background: #2a2a2a;
}
.main-menu-links ul ul ul {
    background: #3a3a3a;
} */