WordPress多级导航菜单样式控制：深度解析与CSS解决方案

<ul class="main-menu-links">
    <li><a href="#">Video</a>
        <ul class="sub-menu"> <!-- 第一级子菜单 -->
            <li><a href="#">Sport</a></li>
            <li><a href="#">Technonlogy</a>
                <ul class="sub-menu-2"> <!-- 第二级子菜单 -->
                    <li><a href="#">sub-menu-2</a></li>
                    <li><a href="#">sub-menu-2</a>
                        <ul class="sub-menu-3"> <!-- 第三级子菜单 -->
                            <li><a href="#">sub-menu-3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<?php 
    wp_nav_menu(
        array(
            'theme_location' => 'menu-1', // 注册的菜单位置
            'items_wrap'     => '<ul class="main-menu-links">%3$s</ul>', // 自定义主菜单容器
        )
    );
?>

<ul class="main-menu-links">
    <li class="menu-item menu-item-has-children">
        <a href="#">Video</a>
        <ul class="sub-menu"> <!-- 第一级子菜单 -->
            <li class="menu-item">
                <a href="#">Sport</a>
            </li>
            <li class="menu-item menu-item-has-children">
                <a href="#">Technonlogy</a>
                <ul class="sub-menu"> <!-- 第二级子菜单，仍然是 .sub-menu -->
                    <li class="menu-item">
                        <a href="#">sub-menu-2</a>
                    </li>
                    <li class="menu-item menu-item-has-children">
                        <a href="#">sub-menu-2</a>
                        <ul class="sub-menu"> <!-- 第三级子菜单，仍然是 .sub-menu -->
                            <li><a href="#">sub-menu-3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

/* 主菜单容器的类名，请根据您的实际情况修改 */
.main-menu-links {
    /* 主菜单的整体样式 */
}

/* 针对所有第二级及更深层级的子菜单 (ul ul) */
.main-menu-links ul ul {
    display: none; /* 默认隐藏所有子菜单 */
    position: absolute; /* 绝对定位，脱离文档流 */
    z-index: 3000; /* 确保子菜单位于其他内容之上 */
    background: linear-gradient(to right, #001e3b, #171717); /* 统一背景 */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* 阴影效果 */
    /* 
     * 对于第一级子菜单（即 .main-menu-links > li > ul），
     * 它们通常垂直向下展开，因此可以设置 top 值。
     * 如果您希望第一级子菜单紧贴父菜单项底部，可以调整 top 值。
     */
    top: 100%; /* 假设主菜单项高度为40px，则子菜单从底部开始 */
    left: 0; /* 默认从父菜单项的左侧开始 */
    min-width: 180px; /* 最小宽度 */
    border-top: 2px solid #0072dd; /* 顶部边框 */
    list-style: none; /* 移除列表样式 */
    padding: 0; /* 移除内边距 */
    margin: 0; /* 移除外边距 */
}

/* 针对所有第二级及更深层级子菜单中的列表项 (ul ul li) */
.main-menu-links ul ul li {
    position: relative; /* 相对定位，为嵌套的子菜单提供定位上下文 */
    width: 100%; /* 列表项宽度填充父菜单 */
    float: none; /* 移除浮动 */
}

/* 针对所有第二级及更深层级子菜单中的链接 (ul ul li a) */
.main-menu-links ul ul li a {
    padding: 10px 15px; /* 调整链接的内边距 */
    display: block; /* 使链接填充整个列表项区域 */
    white-space: nowrap; /* 防止文本换行 */
    color: #ffffff; /* 链接颜色 */
    text-decoration: none; /* 移除下划线 */
}

/* 鼠标悬停在任何带有子菜单的列表项上时，显示其直接子菜单 */
.main-menu-links li:hover > ul {
    display: block; /* 显示子菜单 */
}

/* 针对第三级及更深层级的子菜单 (ul ul li ul) */
/* 它们通常是“飞出式”的，水平展开 */
.main-menu-links ul ul li ul {
    left: 100%; /* 从父列表项的右侧开始 */
    top: 0; /* 与父列表项顶部对齐 */
    border-radius: 5px; /* 圆角边框 */
    /* 可以在这里为第三级子菜单设置不同的背景或其他样式 */
    /* background: #333; */
}

/* 鼠标悬停在第三级及更深层级子菜单的列表项上时，显示其直接子菜单 */
/* 这一规则与 .main-menu-links li:hover > ul 结合，确保所有层级都能正确显示 */
.main-menu-links ul ul li:hover > ul {
    display: block;
}

/* 针对子菜单项的悬停效果 */
.main-menu-links ul ul li:hover > a {
    background-color: rgba(255, 255, 255, 0.1); /* 悬停背景色 */
}