I want to make a dropdown which is clickable also. Like I have a menu which has dropdown options so If I hover on it, will display dropdown and if I want to click on that, it should display link that has been provided to it.

This is the 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>

So, now I want that if I click on Logistics Services then mainservice.html page should display and dropdown should also be there. It should be mobile friendly also.

I tried through CSS, but when I checked it on mobile, then it is not working as expected.

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

How should I do it?