Open dropdown without it being a daughter tag

Asked

Viewed 25 times

1

Good morning guys, I could create a dropdown without it needing to be a daughter tag?

I’ll explain with code. We usually do this:

.menu-dropdown {display: none;list-style: none;}
.menu:hover .menu-dropdown {display: block;}
<ul class="menu">
    <li>
        <a href="#">Teste</a>
        <ul class="menu-dropdown">
            <li><a href="#">Abriu</a></li>
        </ul>
    </li>
</ul>

You could do this with ul(menu-dropdown) outside ul(menu)?

For example:

.menu-dropdown {display: none;list-style: none;}
.menu:hover .menu-dropdown {display: block;}
<ul class="menu">
    <li>
        <a href="#">Teste</a>
    </li>
</ul>
<ul class="menu-dropdown">
    <li><a href="#">Abriu</a></li>
</ul>

As you can see, it didn’t work there, but it would have been?

css dropdown

  • Just with CSS or valley with jQuery?

  • Only with CSS, with Jquery I think I’ve already created, but, as I’m trying to use as little JS as possible, I think it would be ideal only with CSS

1 answer

1


You can do the :hover on a brother and stylize the brother down using the dial + so you do the hover in the .menu and with the + you say the brother should stay with display:block

Then you need to say that the :hover in brother tb should leave it as display:block, or else when you go from one brother to the other .drop-down will disappear.

To better understand see the code below:

.menu-dropdown {display: none;list-style: none;}
.menu:hover + .menu-dropdown {display: block;} 
ul {
    margin: 0;
}
.menu:hover {
    background-color: red;
}
.menu-dropdown {
    padding-top: 10px;
}
.menu-dropdown:hover {
    display: block;
}
<ul class="menu">
    <li>
        <a href="#">Teste</a>
    </li>
</ul>
<ul class="menu-dropdown">
    <li><a href="#">Abriu</a></li>
</ul>

TIP

Because of the Box-Model of the CSS the :hover in margin of the element does not work, however the :hover in the padding element works. So in the case of this menu I needed to remove the banks, and separate the brothers with padding. Otherwise if there is a margin between a brother and another when the mouse passes over that margin the brother .drop-down will disappear... https://developer.mozilla.org/en-US/docs/Web/CSS/box_model

Browser other questions tagged css dropdown

You are not signed in. Login or sign up in order to post.