html - Highlight active links -

i creating sidebar menu , having problem highlighting active link - text of highlighted link white instead of grey.

appreciate support.

html

<div id="nav"> <ul>     <li class="active"><i class="fa fa-pencil"> post blog</i></a></li>     <li><a href="/menu.php"><i class="fa fa-pencil"> post blog</i></a></li>     <li><a href="/calendar.php"><i class="fa fa-pencil"> post blog</i></a></li>     <li><a href="/shop.php"><i class="fa fa-pencil"> post blog</i></a></li> </ul>  </div> 

css

#nav{ position: fixed; width: 180px; margin-left: -180px; background-color: rgba(255,255,255, 0.8);   } #nav ul{ list-style: none; margin: 0; padding: 0; } #nav li a:link, li a:visited{ display: block; padding: 15px 15px; border-left: 8px solid #005b86; text-decoration: none; color: #333333;   } #nav li a:hover{ background-color: #005b86; color: #fff; } #nav .active{ background-color: #005b86; color: #fff;     } 

the point try style override other styles have color specified.

i suggest reading on css specificity: https://css-tricks.com/specifics-on-css-specificity/

try

#nav li.active a:link{   background-color: #005b86;   color: #fff;     } 

see: https://jsfiddle.net/9drxzat5/