Open dropdown without it being a daughter tag

Question

Open dropdown without it being a daughter tag

Navigation

#1 by (1 votes)

1

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

I'll explain with code. Usually we 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>

Would you like to do this with ul (menu-dropdown) outside the 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 did not work there, but could you do it?

css dropdown

asked by anonymous 27.11.2018 / 11:43

1 answer

What's the difference in leaving a variable in the protocol marked static or non-static in Swift 4? How to get a Blob response with AngularJs?

score 1 · Accepted Answer

You can do :hover on a brother and style the brother on the bottom using the + selector so you do hover on .menu and with + you say brother must be display:block

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

To understand better 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

Due to the CSS Box of the element in the margin element does not work, however, :hover does not :hover of element works. So in the case of this menu I had to remove the margins , and separate the siblings with padding . Otherwise if you have a margin between one sibling and another when the mouse passes over that margin, the padding sibling will disappear ... link