I created this custom css menu, but when switching tabs, the "Active" tab design remains on the 'Home' link on the menu, rather than the actual page I'm on. Any idea how I an fix this?
Here's the code:
.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu
li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 0px -30px no-repeat;}
.menu
li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 100% -30px no-repeat;}
.menu
li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu
li a:hover span{background-position:100% -60px;}
.menu
li a.active, .menu
li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu
li a.active span, .menu
li a.active:hover span{background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 100% -90px no-repeat;}
<ul class="menu">
<li><a href="http://caribbeantl.com/"; class="active"><span>Home</span></a></li>
<li><a href="http://caribbeantl.com/hotels/"><span>Testing post</span></a></li>
</ul>
