WordPress.org

Forums

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

  1. Shaigan Marten
    Member
    Posted 2 years 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

  • RSS feed for this topic
  • Started 2 years ago by Shaigan Marten
  • This topic is not resolved
  • WordPress version: 3.4.2

Tags

No tags yet.