White Maskers White Maskers - 3 months ago 13
CSS Question

one tag property override one class property

This is a program code to implement a side menu bar. It consists of two drop down sub menus. The menus 'Apps' and 'Layout' are display when user click on it. Initially I set the color value of sub menu item as red, but which displays a color pink. How can I fix it?



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

.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

Use this css

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