0
第一个下拉菜单正常工作，但第二个下拉菜单根本无法工作。我试图指定更多的类，但不起作用，我相信这是非常简单的，我没有被注意到。如果有人帮助我，我会很感激。双下拉菜单不显示第二个下拉菜单
我说的下拉菜单是在“其他控制台”菜单中，当使用“drop-secundario”类将鼠标悬停在“a”标签上时，它将显示类为“dropdown-content-2”的div。
.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>
谢谢，这工作，但现在我与另一件事麻烦，我改变了“下拉列表内容-2”，以显示在左侧，但只当的显示我徘徊在“drop-secundario”，所以我不能在左侧菜单中导航。代码：.dropdown-content-2 { visibility：hidden; 不透明度：0; position：absolute; background：#fff; width：200px; 右：100％; top：0; 过渡：全部0.15s缓解; } –
我对我的代码片段中的最后两条规则进行了更改：我添加了另一个选择器并调整了第二个下拉列表的位置。如有必要，您可以调整位置和宽度值。 – Johannes
它的工作，谢谢，但重要的是没有必要的，改变这一点，我接受你的回答 –