0
Das erste Dropdown funktioniert normal, aber das zweite funktioniert nicht. Ich habe versucht, mehr Klassen zu spezifizieren, aber funktioniert nicht, ich glaube, dass es etwas sehr einfaches ist, dass ich unbemerkt vorbeigehe. Ich werde dankbar sein, wenn mir jemand hilft.Doppeltes Dropdown-Menü zeigt das zweite Dropdown nicht an
Das Dropdown-Menü, das ich sage, befindet sich im Menü "Andere Konsolen". Es sollte das div mit der Klasse "dropdown-content-2" anzeigen, wenn das "a" -Tag mit der Klasse "drop-secundario" angezeigt wird.
.header-menu {
float: right;
height: auto;
font-size: 0;
margin-right: 20px;
}
.header-menu ul li {
height: auto;
display: inline-block;
}
.header-menu ul li.dropdown {
position: relative;
}
.dropdown {
cursor: pointer;
}
.header-menu ul li a {
padding: 0 13px;
text-align: center;
color: #000;
font-size: 16px;
line-height: 70px;
display: block;
font-family: 'Roboto', sans-serif;
font-weight: 700;
letter-spacing: 0.2px;
text-decoration: none;
}
.header-menu ul li:hover {
background: #ff0000;
}
/*Dropdown Menu*/
.dropdown-content {
visibility: hidden;
opacity: 0;
position: absolute;
background: #ff0000;
width: 180px;
right: 0;
transition: all 0.15s ease-in;
}
.header-menu ul li .dropdown-content a {
line-height: 50px;
height: 50px;
font-size: 16px;
color: #000;
text-decoration: none;
display: block;
text-align: left;
text-indent: 10px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
.header-menu ul li .dropdown-content a:hover {
background: red;
color: #fff;
}
.dropdown:hover .dropdown-content {
visibility: visible;
opacity: 1;
top: 70px;
}
.arrow-down:after {
content: "";
display: inline-block;
vertical-align: middle;
margin: 0 3px 3px 6px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000;
}
/*Dropdown 2*/
.dropdown-content a.drop-secundario {
position: relative;
}
.dropdown-content-2 {
visibility: hidden;
opacity: 0;
position: absolute;
background: #fff;
width: 200px;
right: 0;
transition: all 0.15s ease-in;
}
.dropdown-content a.drop-secundario:hover .dropdown-content-2 {
visibility: visible;
opacity: 1;
}<nav class="header-menu">
<ul>
<li><a href="#">PS4</a></li>
<li><a href="#">XBOX ONE</a></li>
<li><a href="#">PC</a></li>
<li><a href="#">eSports</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Vídeos</a></li>
<li><a href="#">Lançamentos</a></li>
<li class="dropdown">
<a class="arrow-down">Mais</a>
<div class="dropdown-content">
<a class="drop-secundario">Outros Consoles</a>
<div class="dropdown-content-2">
<a href="#">PS3</a>
<a href="#">XBOX 360</a>
<a href="#">Switch</a>
<a href="#">WII U</a>
<a href="#">3DS</a>
<a href="#">PS Vita</a>
<a href="#">Retrô</a>
</div>
<a href="#">Autores</a>
</div>
</li>
</ul>
</nav>
Danke, das funktioniert, aber jetzt bin ich Probleme mit einem anderen Ding, änderte ich die „Drop-Down-content-2“ auf der linken Seite zu zeigen, aber es zeigt nur, wenn Ich schwebe die "Drop-Secundario", so dass ich nicht im linken Menü navigieren kann. Code: .dropdown-content-2 { Sichtbarkeit: versteckt; Opazität: 0; Position: absolut; Hintergrund: #fff; Breite: 200px; rechts: 100%; oben: 0; Übergang: alle 0.15s Ease-In; } –
Ich habe Änderungen an den letzten beiden Regeln in meinem Snippet vorgenommen: Ich habe einen weiteren Selektor hinzugefügt und die Position des zweiten Dropdowns angepasst. Sie können die Positions- und Breitenwerte bei Bedarf anpassen. – Johannes
Es hat funktioniert, danke, aber das! Wichtig ist nicht nötig, ändere das und ich akzeptiere deine Antwort –