I have a menu with HTML and CSS, which works on small screens with a "hamburger" menu overlay and on desktop with dropdowns. On iPad, clicking on the dropdown menu produces no effect.

I found this thread and tried the code, but it fails to show the dropdown upon clicking on the dropdown menu.

The PUG template is:

          nav#main-menu.main-menu
            a#main-menu-close.menu-close(href="#main-menu-toggle")
            ul
              li #[a(href="/home" class="home" id="home") Home]
              li#menu_dropdown_videos.menu-dropdown
                span Content
                .menu-dropdown-content
                  | #[a(href="/trailer") Trailer]

The relevant CSS is:

  .menu-dropdown-content {
    display: none;
    position: absolute;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    background-color: white;
  }


  .menu-dropdown:hover .menu-dropdown-content,
  .menu-dropdown:target .menu-dropdown-content
  {
    display: block;
  }

What JavaScript can I add that shows the dropdown on iPad touch events?