如何將下拉子菜單代碼添加到此菜單

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