Support » How-To and Troubleshooting » Custom CSS menu, "Active" tab remains on 'Home' not the actual page

Custom CSS menu, "Active" tab remains on 'Home' not the actual page

  • Shaigan Marten


    Hi there,

    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/hotels/"><span>Testing post</span></a></li>

  • The topic ‘Custom CSS menu, "Active" tab remains on 'Home' not the actual page’ is closed to new replies.