Tengo un menú con HTML y CSS, que funciona en pantallas pequeñas con una superposición de menú "hamburguesa" y en el escritorio con menús desplegables. En iPad, hacer clic en el menú desplegable no produce ningún efecto.

Encontré este hilo y probé el código, pero no muestra el menú desplegable al hacer clic en el menú desplegable.

La plantilla PUG es:

 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]

El CSS relevante es:

 .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; }

¿Qué JavaScript puedo agregar que muestre el menú desplegable en los eventos táctiles del iPad?