如何将下拉菜单从 Hover 更改为“单击”

Question

I have a navbar menu, and in it there are 3 dropdown menus which default is hover. because the 3 menus are close together, the hover from the dropdown causes a bug/collision, I want to replace it with a 'click' dropdown, where do I have to change the css or javascript code?

 <nav class="nav-menu d-none d-lg-block">
    <ul>
      <li class="active"><a href="{{route('welcome')}}">Home</a></li>
      <li class="drop-down"><a href="#">Profile</a>
        <ul>
            <li><a href="#about">WBK & WBBM</a></li>
            <li><a href={{route('sambutan')}}>Sambutan</a></li>
            <li><a href={{route('visimisi')}}>Visi Misi</a></li>
            <li><a href={{route('strukturorganisasi')}}>Struktur Organisasi</a></li>
            <li><a href={{route('pejabat')}}>Pejabat Struktural</a></li>
            <li><a href={{route('sejarah')}}>Sejarah Kejari Sragen</a></li>
            <li><a href={{route('doktrin')}}>Tri Krama Adhyaksa</a></li>
          </ul>
      </li>

      <li class="drop-down"><a href="#">Bidang</a>
        <ul>
          <li><a href="#bidang">Bidang</a></li>
          <li><a href={{route('pembinaan')}}>Pembinaan</a></li>
          <li><a href={{route('intelijen')}}>Intelijen</a></li>
          <li><a href={{route('pidum')}}>Tindak Pidana Umum</a></li>
          <li><a href={{route('pidsus')}}>Tindak Pidana Khusus</a></li>
          <li><a href={{route('datun')}}>Perdata & Tata Usaha Negara</a></li>
          <li><a href={{route('barbuk')}}>Pengolahan Barang Bukti & Barang Rampasan</a></li>
        </ul>
      </li>
    </ul>
  </nav><!-- .nav-menu -->

Answer 1

It would help if you posted the CSS/JS as well. I've styled your HTML to be a very basic nav, but in the future please follow Stack Overflows Minimal Reproducible guidelines .

Your code examples should be…

• …Minimal – Use as little code as possible that still produces the same problem
• …Complete – Provide all parts someone else needs to reproduce your problem in the question itself
• …Reproducible – Test the code you're about to provide to make sure it reproduces the problem

That said!

Here's a working example of what you've described, please let me know if this doesn't fit with what you need.

 let navLinks = document.querySelectorAll("nav > ul > li"); navLinks.forEach(link => { link.addEventListener('click', () => toggleClassName(link, navLinks) ); }); function toggleClassName(link, navLinks) { if (link.classList.contains('active')) { link.classList.remove('active'); } else { navLinks.forEach(currentLink => {currentLink.classList.remove('active');}) link.classList.add('active'); } }

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { font-family: 'Roboto', sans-serif; } ul { list-style:none; padding: 1em; margin:0; } li { padding: .5em; } nav > ul { display:flex; list-style:none; } nav > ul > li { position:relative; } nav > ul > li > a { color: black; text-decoration: none; background: #EF798A; padding: .5em; border-radius: .3em; color:white; font-weight:bold; text-transform:uppercase; } nav > ul > li > ul { position:absolute; top:calc(100% +.5em); width: 10em; background: #E5C3D1; border-radius: .3em; max-height:1px; opacity:0; visibility:hidden; } nav > ul > li.active > ul { max-height:100vh; opacity:1; visibility:visible; } nav > ul > li > ul > li { padding-top: 0; } nav > ul > li > ul > li::after { content: " "; position: absolute; bottom: 99%; /* At the bottom of the tooltip */ left: 7%; margin-left: -.5em; border-width: .5em; border-style: solid; border-color: transparent transparent #E5C3D1 transparent; }

 <nav class="nav-menu d-none d-lg-block"> <ul> <li class="active"><a href="{{route('welcome')}}">Home</a></li> <li class="drop-down active"><a href="#">Profile</a> <ul> <li><a href="#about">WBK & WBBM</a></li> <li><a href={{route('sambutan')}}>Sambutan</a></li> <li><a href={{route('visimisi')}}>Visi Misi</a></li> <li><a href={{route('strukturorganisasi')}}>Struktur Organisasi</a></li> <li><a href={{route('pejabat')}}>Pejabat Struktural</a></li> <li><a href={{route('sejarah')}}>Sejarah Kejari Sragen</a></li> <li><a href={{route('doktrin')}}>Tri Krama Adhyaksa</a></li> </ul> </li> <li class="drop-down"><a href="#">Bidang</a> <ul> <li><a href="#bidang">Bidang</a></li> <li><a href={{route('pembinaan')}}>Pembinaan</a></li> <li><a href={{route('intelijen')}}>Intelijen</a></li> <li><a href={{route('pidum')}}>Tindak Pidana Umum</a></li> <li><a href={{route('pidsus')}}>Tindak Pidana Khusus</a></li> <li><a href={{route('datun')}}>Perdata & Tata Usaha Negara</a></li> <li><a href={{route('barbuk')}}>Pengolahan Barang Bukti & Barang Rampasan</a></li> </ul> </li> </ul> </nav><.-- .nav-menu -->