Jump to content

My CSS isn't working as expected


KateMacwil
 Share

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

Link to comment
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.

Link to comment
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.

Link to comment
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
 Share

×
×
  • Create New...