In my site navigation I have an image that should appear to highlight the current page that you are on however it doesn't seem to work in Silverstripe. Has anyone experienced this or have a suggestion on how to fix it?
This is the original CSS for the navigation. It wirks as intended when I coded the page using regular HTML. Take a look at the #Navigation ul li.current a this is the part that isn't working.
/* MAIN NAVIGATION - TABS
----------------------------------------- */
#Navigation {
height: 73px;
overflow: hidden;
position: absolute;
top: 0;
left: 4px;
z-index: 100;
font-size:11px;
}
#Navigation ul {
padding: 0 8px 0 0;
}
#Navigation ul li {
float: left;
margin: 0 -8px 0 0;
list-style-type:none;
}
#Navigation ul li a {
float: left;
width: 98px;
height: 73px;
line-height: 48px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: #000;
font-size: 11px;
}
#Navigation ul li a:hover {
color: #fa635e;
}
#Navigation ul li a:active {
color: #fa635e;
}
#Navigation ul li a:selected {
background: url(http://www.cassiusblueconsulting.com/themes/cassiusblueco/images/menu.png) repeat-x 0% 0%;
line-height: 68px;
color: #fff;
}
#Navigation ul li.current a {
background: url(http://www.cassiusblueconsulting.com/themes/cassiusblueco/images/menu.png) repeat-x 0% 0%;
line-height: 68px;
color: #fff;
}
#Navigation ul li.current a:hover {
color: #fff;
}