1つのタグプロパティが1つのクラスプロパティをオーバーライドします。

Question

これはサイドメニューバーを実装するためのプログラムコードです。 2つのドロップダウンサブメニューで構成されています。メニュー「Apps」と「Layout」は、ユーザーがクリックすると表示されます。最初は、サブメニュー項目の色の値を赤色に設定しましたが、色はピンク色です。どうすれば修正できますか？

function displaySubMenu(e){ 
 
    var k=e; 
 
    if(k==2) 
 
\t { 
 
\t \t document.getElementById("sub-menu-one").style.display="block"; 
 
\t \t document.getElementById("sub-menu-two").style.display="none"; 
 
\t } 
 
    else if(k==3) 
 
\t { 
 
\t document.getElementById("sub-menu-two").style.display="block"; 
 
\t document.getElementById("sub-menu-one").style.display="none"; 
 
\t } 
 
    else 
 
    \t { 
 
\t document.getElementById("sub-menu-one").style.display="none"; 
 
\t document.getElementById("sub-menu-two").style.display="none"; 
 
    \t } 
 
    }

.flip-menu-text{ 
 
     text-align: left; 
 
     font-weight: 500; 
 
     opacity: 1; 
 
     line-height: 1.125rem; 
 
     padding: .5625rem 0; 
 
     margin: 0; 
 
     outline: 0; 
 
     border: 0; 
 
     font-size: 1em; 
 
    } 
 
    .flip-sub-menu{ 
 
     opacity: 0.75; 
 
     padding-top: .4375rem; 
 
     padding-bottom: .4375rem; 
 
     padding-left: 2rem; 
 
     text-align: left; 
 
     line-height: 1.125rem; 
 
     display:block; 
 
     background-color:#1a1a65; 
 
     /* color: rgba(255,255,255,.87)!important;*/ 
 
     color: red; 
 
     width: 100%; 
 
     display: none; 
 
     
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
<li class="flip-container-main-menu-parent" onclick="displaySubMenu(1)"> 
 
    <i class="flip-menu-main-icon fa fa-glass "></i> 
 
    <span class="flip-menu-text">Dashboard</span> 
 
</li> 
 
<li class="flip-container-main-menu-parent" onclick="displaySubMenu(2)"> 
 
    <i class="flip-menu-main-icon fa fa-th"></i> 
 
    <span class="flip-menu-text">Apps</span> 
 
    <i class="flip-menu-drop-down-icon fa fa-caret-down"></i> 
 
    <ul id="sub-menu-one" class="flip-sub-menu"> 
 
    <li> <a href="#">Inbox</a> </li> 
 
    <li> <a href="#">Condact</a> </li> 
 
    <li> <a href="#">Calendar</a> </li> 
 
    </ul> 
 
</li> 
 
<li class="flip-container-main-menu-parent" onclick="displaySubMenu(3)"><i class="flip-menu-main-icon fa fa-th-large"></i><span class="flip-menu-text">Layout</span><i id="me" class="flip-menu-drop-down-icon fa fa-caret-down"></i> 
 
    <ul id="sub-menu-two" class="flip-sub-menu"> 
 
    <li> <a href="#">Header</a> </li> 
 
    <li> <a href="#">Aside</a> </li> 
 
    <li> <a href="#">Footer</a> </li> 
 
    </ul> 
 
</li> 
 
<li class="flip-container-main-menu-parent" onclick="displaySubMenu(4)"><i class="flip-menu-main-icon fa fa-align-justify"></i><span class="flip-menu-text">Widjet</span></li>

Answer 1

使用このCSS

ul.flip-sub-menu li a { 
    color: red; 
}