一个标记属性覆盖一个类属性

Question

这是实现侧边菜单栏的程序代码。它由两个下拉子菜单组成。菜单＆＃39;应用＆＃39;和＆＃39;布局＆＃39;用户点击它时显示。最初我将子菜单项的颜色值设置为红色，但显示的颜色为粉红色。我该如何解决？

＆＃13;

＆＃13;

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

＆＃13;

    .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;
      
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用此css

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