活動類沒有顯示聲明的css

Question

我在頁面上回顯「active」和「active-drop」類。使用下面的代碼。

<?php if(is_page('page_name')){echo 'active';}?>"> 
<?php if(is_page('page_name')){echo 'active-drop';}?>"> 
<?php if(is_page (array ('ps3','xbox-360', 'switch', 'wiiu', '3ds', 'ps-vita', 'retro'), true)){echo 'active-drop';}?> 

而對於類的CSS是這些：

.active { 
    background: red; 
} 

.active-drop { 
    background: red; 
    color: #fff; 
} 

.arrow-left:before .active-drop { 
    border-right: 5px solid #fff; 
} 

到目前爲止好，「活動」類的工作，因爲它應該，但「主動降」課改的背景下，但不會改變顏色，「左箭頭：之前」也不會改變顏色。我認爲這與懸停中的顏色變化有關，所以我嘗試對活動類進行更具體的描述，即使使用「+」選擇器，儘管它不起作用。使用！重要的是「積極下降」，但不是「向左箭頭：之前」。但我不想使用！重要的。如果任何人都可以幫助我，我很感激。

.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: #fff; 
 
    width: 180px; 
 
    right: 0; 
 
    transition: all 0.15s ease-in; 
 
    border-width: 0 1px 1px 1px; 
 
    border-style: solid; 
 
    border-color: #000; 
 
} 
 

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

 
.arrow-left:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    position: absolute; 
 
    top: 20.5px; 
 
    left: 9px; 
 
    width: 0; 
 
    height: 0; 
 
    
 
    border-top: 5px solid transparent; 
 
    border-bottom: 5px solid transparent; 
 
    border-right: 5px solid #000; 
 
} 
 

 
.dropdown-content a.drop-secundario:hover:before { 
 
    border-right: 5px solid #fff; 
 
} 
 

 
.dropdown-content a.drop-secundario { 
 
    position: relative; 
 
} 
 

 
.dropdown-content-2 { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    position: absolute; 
 
    background: #fff; 
 
    width: 200px; 
 
    right: 100%; 
 
    top: 0; 
 
    transition: all 0.15s ease-in; 
 
    border-width: 0 1px 1px 1px; 
 
    border-style: solid; 
 
    border-color: #000; 
 
} 
 

 
.dropdown-content .dropdown-content-2:hover, 
 
.dropdown-content a.drop-secundario:hover+.dropdown-content-2 { 
 
    visibility: visible; 
 
    opacity: 1; 
 
}

<nav class="header-menu"> 
 
    <ul> 
 
    <li class="active"><a href="#">PS4</a></li> 
 
    <li class="active"><a href="#">XBOX ONE</a></li> 
 
    <li class="active"><a href="#">PC</a></li> 
 
    <li class="active"><a href="#">eSports</a></li> 
 
    <li class="active"><a href="#">Reviews</a></li> 
 
    <li class="active"><a href="#">Vídeos</a></li> 
 
    <li class="active"><a href="#">Lançamentos</a></li> 
 
    <li class="dropdown"> 
 
    <a class="arrow-down active">Mais</a> 
 
    <div class="dropdown-content"> 
 
    <a class="drop-secundario active-drop arrow-left">Outros Consoles</a> 
 
    <div class="dropdown-content-2"> 
 
    <a href="#" class="active-drop">PS3</a> 
 
    <a href="#" class="active-drop">XBOX 360</a> 
 
    <a href="#" class="active-drop">Switch</a> 
 
    <a href="#" class="active-drop">WII U</a> 
 
    <a href="#" class="active-drop">3DS</a> 
 
    <a href="#" class="active-drop">PS Vita</a> 
 
    <a href="#" class="active-drop">Retrô</a> 
 
    </div> 
 
    <a href="#" class="active-drop">Contato</a> 
 
    </div> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

。主動降正在.dropdown內容，因此被「.header菜單UL李.dropdown內容是」影響了css樣式。下面的CSS將覆蓋它。

.header-menu ul li .dropdown-content a.active-drop { 
background-color: red; 
color: #fff; 
} 

.dropdown-content a.active-drop:before { 
border-right: 5px solid #fff; 
}