WordPress.org

Ready to get started?Download WordPress

Forums

Custom CSS menu, "Active" tab remains on 'Home' not the actual page (1 post)

  1. Shaigan Marten
    Member
    Posted 1 year ago #

    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><span>Home</span></a></li>
    <li><a href="http://caribbeantl.com/hotels/"><span>Testing post</span></a></li>

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.