Skip to main content
Commonmark migration
Fonte Link

Vc pode fazer o :hover em um irmão e estilizar o irmão de baixo usando o seletor + assim vc faz o hover no .menu e com o + vc diz que o irmão deve ficar com display:block

Depois vc precisa dizer que o :hover no irmão tb deve deixa-lo como display:block, ou então quando vc sair de um irmão para o outro o .drop-down vai sumir.

Para entender melhor veja o código abaixo:

.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>


#DICA

DICA

Devido o Box-Model do CSS o :hover na margem do elemento não funciona, porém o :hover no padding do elemento funciona. Então no casso desse menu eu precisei remover as margens, e separar os irmãos com padding. Caso contrário se tiver uma margem entre um irmão e outro quando o mouse passar sobre essa margem o irmão .drop-down vai sumir... https://developer.mozilla.org/pt-BR/docs/Web/CSS/box_model

Vc pode fazer o :hover em um irmão e estilizar o irmão de baixo usando o seletor + assim vc faz o hover no .menu e com o + vc diz que o irmão deve ficar com display:block

Depois vc precisa dizer que o :hover no irmão tb deve deixa-lo como display:block, ou então quando vc sair de um irmão para o outro o .drop-down vai sumir.

Para entender melhor veja o código abaixo:

.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>


#DICA

Devido o Box-Model do CSS o :hover na margem do elemento não funciona, porém o :hover no padding do elemento funciona. Então no casso desse menu eu precisei remover as margens, e separar os irmãos com padding. Caso contrário se tiver uma margem entre um irmão e outro quando o mouse passar sobre essa margem o irmão .drop-down vai sumir... https://developer.mozilla.org/pt-BR/docs/Web/CSS/box_model

Vc pode fazer o :hover em um irmão e estilizar o irmão de baixo usando o seletor + assim vc faz o hover no .menu e com o + vc diz que o irmão deve ficar com display:block

Depois vc precisa dizer que o :hover no irmão tb deve deixa-lo como display:block, ou então quando vc sair de um irmão para o outro o .drop-down vai sumir.

Para entender melhor veja o código abaixo:

.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>


DICA

Devido o Box-Model do CSS o :hover na margem do elemento não funciona, porém o :hover no padding do elemento funciona. Então no casso desse menu eu precisei remover as margens, e separar os irmãos com padding. Caso contrário se tiver uma margem entre um irmão e outro quando o mouse passar sobre essa margem o irmão .drop-down vai sumir... https://developer.mozilla.org/pt-BR/docs/Web/CSS/box_model

inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Vc pode fazer o :hover em um irmão e estilizar o irmão de baixo usando o seletor + assim vc faz o hover no .menu e com o + vc diz que o irmão deve ficar com display:block

Depois vc precisa dizer que o :hover no irmão tb deve deixa-lo como display:block, ou então quando vc sair de um irmão para o outro o .drop-down vai sumir.

Para entender melhor veja o código abaixo:

.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>


#DICA

Devido o Box-Model do CSS o :hover na margem do elemento não funciona, porém o :hover no padding do elemento funciona. Então no casso desse menu eu precisei remover as margens, e separar os irmãos com padding. Caso contrário se tiver uma margem entre um irmão e outro quando o mouse passar sobre essa margem o irmão .drop-down vai sumir... https://developer.mozilla.org/pt-BR/docs/Web/CSS/box_model

Vc pode fazer o :hover em um irmão e estilizar o irmão de baixo usando o seletor + assim vc faz o hover no .menu e com o + vc diz que o irmão deve ficar com display:block

Depois vc precisa dizer que o :hover no irmão tb deve deixa-lo como display:block, ou então quando vc sair de um irmão para o outro o .drop-down vai sumir.

Para entender melhor veja o código abaixo:

.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>

Vc pode fazer o :hover em um irmão e estilizar o irmão de baixo usando o seletor + assim vc faz o hover no .menu e com o + vc diz que o irmão deve ficar com display:block

Depois vc precisa dizer que o :hover no irmão tb deve deixa-lo como display:block, ou então quando vc sair de um irmão para o outro o .drop-down vai sumir.

Para entender melhor veja o código abaixo:

.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>


#DICA

Devido o Box-Model do CSS o :hover na margem do elemento não funciona, porém o :hover no padding do elemento funciona. Então no casso desse menu eu precisei remover as margens, e separar os irmãos com padding. Caso contrário se tiver uma margem entre um irmão e outro quando o mouse passar sobre essa margem o irmão .drop-down vai sumir... https://developer.mozilla.org/pt-BR/docs/Web/CSS/box_model

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Vc pode fazer o :hover em um irmão e estilizar o irmão de baixo usando o seletor + assim vc faz o hover no .menu e com o + vc diz que o irmão deve ficar com display:block

Depois vc precisa dizer que o :hover no irmão tb deve deixa-lo como display:block, ou então quando vc sair de um irmão para o outro o .drop-down vai sumir.

Para entender melhor veja o código abaixo:

.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>