Jump to content
KateMacwil

My CSS isn't working as expected

Recommended Posts

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

 

 

 

menu-prob.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×