0

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?

Screenshot to display dropdown

Rakhi
  • 81
  • 4
  • 21
  • Does this answer your question? [How can I use
      list instead of
    – insertusernamehere Jun 27 '22 at 09:52
  • "when I checked it on mobile, then it is not working as expected", because there's no `:hover` on mobile – GrafiCode Jun 27 '22 at 09:54
  • @GrafiCode So is there any other way to get it done on both the devices? – Rakhi Jun 27 '22 at 10:04
  • You can't have the drop down toggle as a link otherwise how will it know when to open the drop down or when to navigate off to the page, it can only do either one or the other. If you are saying you want to navigate off to the page and then open the dropdown, then that is very poor ux – Pete Jun 27 '22 at 10:04
  • I have seen somewhere, and that was built in wordpress. So yes, there it was working. I don't know how. – Rakhi Jun 27 '22 at 10:06
  • It would most likely have been a hover menu – Pete Jun 27 '22 at 10:06
  • Maybe this will work for you: https://stackoverflow.com/a/52549436/3807365 – IT goldman Jun 27 '22 at 10:08
  • this answer makes use of `:active` in combination with `:hover` to handle desktop / mobile interactions https://stackoverflow.com/a/22560108/5334486 – GrafiCode Jun 27 '22 at 10:23

0 Answers0