How can I add drop down Sub menu code to this menu

Question

This is the html code of my menu. I would like to add the page "Inspection" as a dropdown sub menu of the page "Services". Could you please help me how can I add dropdown sub menu code to the "Our Services"?

          <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

set the "our services" postion:"realtive" and the submenu position: "absolute" in css. Then set the display:"none" of submenu. Once the user hovers or clicks the "our services" element then the menu will have display:"block" . ie add a pseudo class hover or focus as per your choice and set the submenu div to display: "block" . I am also adding the doc link for further reference https://developer.mozilla.org/en-US/docs/Web/CSS/position