Question 342422 in Html Question posted in
Some basic documentation can be found here.

Html – How to keep drop down open after hover (only with css)

I’ve created a horizontal menu that when you hover an item, a drop down menu appears. This is ok. But when you leave the menu item (to use the drop down) the drop down disappears. I understand that this is because you are no longer hovering it, but how do I solve this? I want the drop down menu directly below it, I haven’t programmed the dropdown position yet but it is anyway next to the button so I don’t know what can I do to make it work, Thanks.
Note: any other correction you’ve realized is gladly welcome 🙂

I’ve tried this:

#nosotros:hover + #dropdown-nosotros, #dropdown-nosotros:hover {
display: block;
}

and this:

#dropdown-nosotros:hover + #dropdown-nosotros {
    display: block;
}

What I’m expecting is to keep the drop down menu open when someone wants to click a button inside the drop down menu.

HTML

<!DOCTYPE html>
<htlm>
    <header>
        <link href="styleprueba.css" rel="stylesheet">
    </header>
    <body>
        
        <button class="main-menu-button" id="nosotros">Nosotros</button>

            <div class="dropdown-menu" id="dropdown-nosotros">
                <h2 class="dropdown-title">Nosotros</h2>
                <button class="main-menu-second-button">Bienvenidos</button>
                <button class="main-menu-second-button">Misión y Visión</button>
                <button class="main-menu-second-button">Próximamente</button>
                <img src="">
            </div>
        
    </body>
</htlm>

CSS

#nosotros {
    position: fixed;
    top: 7%;
    right: 52%;
    width: 10%;
    background-color: blue;
}

.main-menu-button {
    font-family: lorimer-no-2, sans-serif;
    font-style: black;
    font-size: 13px;
    background-color: transparent;
    color: white;
    border: transparent;
}

.dropdown-menu {
    background-color: whitesmoke;
    color: blue;
}

.main-menu-second-button {
    background-color: transparent;
    color: black;
    border-color: transparent;
}

.main-menu-second-button:hover {
    color: aquamarine;
}
    
#nosotros + #dropdown-nosotros {
    display: none;
}

#nosotros:hover + #dropdown-nosotros, #dropdown-nosotros:hover {
display: block;
}

#dropdown-nosotros:hover + #dropdown-nosotros {
    display: block;
}
Tags:

2

Answers


  1. 0

    Hopefully this will work:

    <style>
    #nosotros {
    position: fixed;
    top: 7%;
    right: 52%;
    width: 10%;
    background-color: blue;
}
.main-menu-button {
    font-family: lorimer-no-2, sans-serif;
    font-style: black;
    font-size: 13px;
    background-color: transparent;
    color: white;
    border: transparent;
}
.dropdown-menu {
    background-color: whitesmoke;
    color: blue;
    display: none;  /* It will nitially hide the dropdown */
    position: absolute;
    top: 30px; /* This will adjust the top position according to your design */
    right: 0; /* This will align the dropdown with the button */
    width: 100%; /* This will make the dropdown full width kindly adjust according to your need */
}
.main-menu-second-button {
    background-color: transparent;
    color: black;
    border-color: transparent;
}
.main-menu-second-button:hover {
    color: aquamarine;
}

#nosotros:hover + .dropdown-menu,
.dropdown-menu:hover {
    display: block;
}
</style>
<!DOCTYPE html>
<htlm>
    <header>
        <link href="styleprueba.css" rel="stylesheet">
    </header>
    <body>
        
        <button class="main-menu-button" id="nosotros">Nosotros</button>

            <div class="dropdown-menu" id="dropdown-nosotros">
                <h2 class="dropdown-title">Nosotros</h2>
                <button class="main-menu-second-button">Bienvenidos</button>
                <button class="main-menu-second-button">Misión y Visión</button>
                <button class="main-menu-second-button">Próximamente</button>
                <img src="">
            </div>
        
    </body>
</htlm>
    Login or Signup to reply.
  2. 0

    in the exemple you first tried can you change it and try again :

    #nosotros:hover + #dropdown-nosotros,
#dropdown-nosotros:hover {
    display: block;
}

.dropdown-menu {
    display: none;
}

#nosotros:hover + #dropdown-nosotros .dropdown-menu {
    display: block;
}

.dropdown-menu:hover {
    display: block;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search