How to change color of active navigation page menu

Question

So I found the thread CSS: How to change colour of active navigation page menu and was trying to do it but had no success.

Here is my menu:

<div id="navMain">
     <ul>

    <li id="current"><a href="user.php" >User</a></li>
    <li><a href="../admin/admin.php">Create User</a></li>   
    <li><a href="../admin_reg/admin_reg.php">Create Admin</a></li>  

    </ul>
</div>

Here is my CSS :

/***************************/
/* Genral Navigation Rules */
/***************************/
#navMain {
    text-align: center;
    margin:-70px ;
}   
#navMain ul {
    margin: 0px auto;
    padding:0px;
}

#navMain ul li {
    margin: 0px auto;
    padding:0px 20px;
    list-style:none;
    display:inline;
}

#navMain ul li a {
    margin: 0px auto;
    padding:0px;
    color:  #FFFFFF;
    text-decoration:none;
    font-weight:normal;
    font-size: 19px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    text-transform:uppercase;
}

#navMain ul li a:hover {
    text-decoration:underline;
    color: #EF7D50;
}
#current {
    color: #EF7D50;
}
#current a{
    color: #EF7D50;
}

Here is a jsfiddle for what I currently have.

Answer 1

How about

#navMain #current a{
    color: #EF7D50;
}

The problem is that your #navMain ul li a rule is more specific than the #current a so it has precedence..

Using two ids for the above rule #navMain #current a makes it be more specific and so it gets applied..