如何将下拉子菜单代码添加到此菜单

Question

这是我的菜单的html代码。 我想将“检查”页面添加为“服务”页面的下拉子菜单。 您能帮我如何将下拉子菜单代码添加到“我们的服务”吗？

          <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 if (is_page('our-services') or 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><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>

Answer 1

在 css 中设置“我们的服务” postion:"realtive"和子菜单position: "absolute" 。 然后设置子菜单the display:"none" 。 一旦用户悬停或单击“我们的服务”元素，菜单将display:"block" 。 即根据您的选择添加伪类悬停或焦点，并将子菜单 div 设置为display: "block" 。 我还添加了文档链接以供进一步参考https://developer.mozilla.org/en-US/docs/Web/CSS/position