My CSS isn't working as expected

[KateMacwil]

HJi

I have created a new sidebar menu and for some reason one of the  menu items has a different text color.

Not sure what I did wrong.

 

#sub-navigation
{
background-color: #f6f6f6;
margin: 0px;
padding:0px;
}

#sub-navigation ul
{
list-style-type: none;
margin: 0px;
padding: 0px;
}

#sub-navigation li 
{
background-image: url("http://dev.townofbauline.ca/wp-content/uploads/2018/04/menuBack-01.jpg");
background-repeat: repeat-x;
color: #FFFFFF;
text-decoration: none;
font-family: Arial;
font-size: 13px;
font-weight: semi-bold;
text-align: center;
margin:0px;
padding:0px;
}

#sub-navigation a:hover
{
background-image: url("http://dev.townofbauline.ca/wp-content/uploads/2018/04/menuBack-02.jpg");
background-repeat: repeat-x;
color: #FFFFFF;
text-decoration: none;
}

#sub-navigation a:active
{
color: #FFFFFF;
text-decoration: none;
}

#sub-navigation a:visited
{
color: #FFFFFF;
text-decoration: none;
}

 

 

 

[Ingolme]

That might be the visited link color. To be sure, you should open the developer tools and check the element. In most browsers you can find the development tools by pressing F12 on your keyboard.

[dsonesuk]

The styling of links have to be done in specific order, and a easy way to remember is use the phrase 'LoVe and HAte' L= 'link:', V = 'visited:' , H = 'hover:‘, A = 'active:‘, you will probably find a class like 'active' is used instead of :active pseudo, as it does not give the desired effect on it own.