How do I keep the dropdown menu open?

HTML & CSS
1

I did a dropdown menu but I don’t know how to keep it open, it just looks weird, like the dropwdown and the button are separate things, please give me some tips on how to improve this, the css on that button is not great either, i’m lost.

2

What do you mean by “keep it open”?

1 Like
3

If you mean you want the top level to stay highlighted while you traverse the dropdown then that is accomplished by setting the background of the anchor while you hover the list.

e.g.

li.dropdown:hover > a{background:red}

This would assume that the dropdown is in a nested list and not in a broken structure like your html :slight_smile:

You have this:

  <li class="dropbtn"><a href="#">SOBRE</a></li>
        <div class="dropdown-content">

That div is invalid in that position. You can only have content in a ul that resides between list tags.

The usual structure is a nested ul for dropdown is like this.

 <ul class="menu">
      <li><a href="./index.html">INÍCIO</a></li>
      <li class="dropdown">
        <a class="dropbtn" href="#">SOBRE</a>
        <ul class="dropdown-content">
          <li><a href="./sobre_dev.html">O DESENVOLVEDOR</a></li>
          <li><a href="./sobre_jogo.html">O JOGO</a></li>
        </ul>
      </li>
      <li><a href="">SUPORTE</a></li>
      <li><a href="./voluntario.html">VOLUNTARIE-SE</a></li>
      <li><a href="./doacoes.html">DOAÇÕES</a></li>
      <li><a href="./cadastro.html">CADASTRO</a></li>
    </ul>

I’ve adjusted your html and added some css to make it work and forked your codepen here.


(Click ‘Edit on codepen’ for full size)

However there is still a lot of work to do as you need to decide on the small screen format and how you are going to handle mobile devices that don’t support hover.

My preference is to abandon hover altogether and use a click menu powered by some simple js class switching and thus keep everyone happy. You are going to need js anyway for the hamburger menu to open a small screen menu (although there are css hacks like the checkbox hack but they generally add more complexity than needed).

Hover dropdowns are UI nightmare and even experts get them horribly wrong :slight_smile:

2 Likes
4

Yes, that’s exactly what I meant, I could’ve phrased that better, mb and thank you. I’m actually just a junior and this code is from a group project I did a few weeks back. This part was not done by me and I don’t use divs that much so I got really confused with their code. Also yeah, I’ve thought about removing the hover because it’s too much of a hassle but just wanted to check for a solution. Thank you so much, i’m just gonna remove the hover.

Their original code:

5

No worries, glad it helped :slight_smile:

I’m not surprised you were confused as ‘their code’ is invalid html and should not be used. It’s a broken structure likely to cause problems somewhere along the line.:slight_smile:

1 Like