如何为WordPress菜单的Our Services添加Inspection下拉子菜单

你已经在代码里搭好了子菜单的基础结构，只需调整两处细节就能让功能完整运行：

修改后的完整菜单代码 #

<nav class="main-navigation">                    
    <ul>
        <li <?php if (is_page('about-us') or wp_get_post_parent_id(0) == 117) echo 'class="current-menu-item"' ?>><a href="<?php echo site_url('/about-us') ?>">About Us</a></li>
        <li <?php 
            // 访问Our Services或其子页面（如Inspection）时，高亮父菜单
            if (is_page('our-services') || is_page('inspection') || wp_get_post_parent_id(0) == 266) 
                echo 'class="current-menu-item"';
        ?>><a href="<?php echo site_url('/our-services') ?>">Our Services</a>
            <ul class="submenu">
                <li <?php if (is_page('inspection')) echo 'class="current-menu-item"' ?>><a href="<?php echo site_url('/our-services/inspection') ?>">Inspection</a></li>
            </ul>
        </li>
        
        <li <?php if (get_post_type() == 'trainingcourses') echo 'class="current-menu-item"' ?>><a href="<?php echo site_url('/trainingcourses') ?>">Training Courses</a></li>
        <li <?php if (is_page('our-career') or wp_get_post_parent_id(0) == 141) echo 'class="current-menu-item"' ?>><a href="<?php echo site_url('/our-career') ?>">Career</a></li>
        <li <?php if (is_page('contact') or wp_get_post_parent_id(0) == 144) echo 'class="current-menu-item"' ?>><a href="<?php echo site_url('/contact') ?>">Contact Us</a></li>
    </ul>
</nav>

必要的CSS样式（实现下拉交互） #

默认子菜单会直接显示在页面流中，需要添加CSS实现鼠标悬停显示的交互效果：

/* 主菜单项设为相对定位，让子菜单基于它定位 */
.main-navigation ul li {
    position: relative;
    display: inline-block; /* 让主菜单横向排列，可根据布局调整 */
    margin-right: 20px;
}

/* 默认隐藏子菜单 */
.main-navigation .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    background: #fff; /* 背景色根据主题调整 */
    padding: 10px 0;
    border: 1px solid #eee;
    min-width: 180px;
}

/* 子菜单项样式 */
.main-navigation .submenu li {
    display: block;
    margin: 0;
    padding: 8px 15px;
}

/* 鼠标悬停父菜单时显示子菜单 */
.main-navigation ul li:hover .submenu {
    display: block;
}

/* 当前子菜单项高亮 */
.main-navigation .submenu .current-menu-item {
    background-color: #f5f5f5; /* 高亮色根据主题调整 */
}

关键说明 #

1. 子菜单结构：在「Our Services」的<li>标签内嵌套<ul class="submenu">，这是下拉菜单的标准HTML结构，所有子菜单项都放在这个嵌套列表里。
2. 高亮逻辑优化：调整了父菜单的current-menu-item判断，确保访问「Inspection」页面时，父菜单「Our Services」也保持高亮；同时给子菜单项单独加了高亮判断，让子页面自身也能标记为当前项。
3. CSS交互实现：通过相对/绝对定位控制子菜单的弹出位置，默认隐藏，鼠标悬停时显示，基础样式可以根据你的网站设计调整颜色、间距等参数。

内容的提问来源于stack exchange，提问作者Golnaz