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
它的工作，謝謝，但重要的是沒有必要的，改變這一點，我接受你的回答 –