css different link styles - html

Question

I am trying to get different 's to look differently, depending on the context. For example, in my html I have
<li> Home </li>
<li> Types of Insurance </li>
<li> Insurance Basics </li>
<li> Customer Center </li>
<li> About </li>
and in my css I have
.navlink : link
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}
.navlink : hover
{
background-color:#ADD8E6;
}
.navlink : visited
{
background-color:#ADD8E6;
}
But this is not working (the links appear unstylized). How would I fix this?

Answer 1

There must be no space before or after the :.

Answer 2

You need to get rid of the space before and after the colon (:).
You can also minimize your code by doing this:
.navlink {
// styling for unclicked link
}
.navlink:hover, .navlink:visited {
// styling for hover/visited state
}
I'm combining hover and visited because the only change you've made is the color, and it's the same for both.
Demo.

Answer 3

#nav{
float: left;
display: block;
font-size: 16px;
/*font-weight: bold;*/
font-family: 'Georgia', serif;
}
#nav>li{
display: block;
float: left;
line-height: 36px;
padding-right: 10px;
margin-left: 3px;
margin-right: 3px;
background: url(../img/nav-bullet.png) no-repeat center right;
}
#nav li>a:first-letter {
font-family: 'YataghanRegular', 'Georgia', serif;
font-size: 20px;
}
#nav li>a{ /* Parent Menu without hover*/
text-decoration: none;
color: #000000;
/*color: #CC3700; 606060*/
padding: 0px 10px 0px 10px;
display: block;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#nav li:last-child{
background: none;
}
#nav>li:hover>a,
#nav>li.current-menu-item>a{/* Parent menu color with hover */
/*color: #eee;
background: #363636;*/
color:#000000;
background: #cce4ff ;
/*font-size: 12px;*/
/*background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#353535));
background: -moz-linear-gradient(top, #000000, #353535);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#353535', GradientType=0);*/
/*text-shadow: 0 -1px rgba(0, 0, 0, 0.7);*/
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,.5);
box-shadow: 0px 1px 2px rgba(0,0,0,.5);
}
Try This..