Quiero hacer un menú desplegable en el que también se pueda hacer clic. Tengo un menú que tiene opciones desplegables, así que si paso el mouse sobre él, se mostrará un menú desplegable y si quiero hacer clic en él, debería mostrar el enlace que se le ha proporcionado.

Este es el HTML:

 <ul class="navbar-nav ml-auto nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="mainservice.html" id="navbarDropdown" role="button" aria-expanded="false"> Logistics Services </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="ftl.html">FTL</a> <a class="dropdown-item" href="ltl.html">LTL</a> <a class="dropdown-item" href="intermodal.html">Intermodal</a> </div> </li> </ul>

Entonces, ahora quiero que si hago clic en Servicios de logística, se muestre la página mainservice.html y el menú desplegable también debería estar allí. También debe ser compatible con dispositivos móviles.

Lo intenté a través de CSS, pero cuando lo verifiqué en el móvil, no funciona como se esperaba.

 ul.nav li.dropdown:hover div.dropdown-menu{ display:block; }

¿Cómo debería hacerlo?