アクティブクラス宣言されたCSSを表示していません

Question

ページ上に「アクティブ」と「アクティブドロップ」クラスが表示されています。以下のコードを使用してください。

<?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メニューのULのli .dropdown-コンテンツ" によってCSSのスタイルに影響を与えているよう

.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

.active-dropが.dropdownコンテンツの下にあります。以下の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; 
}