Question

Hello i really try to search and to do mutiple experiments, anyway i can get this working..

Im using a javascript menu, working Perfect, but i try to change the background for each menu, it also go great.. but the HOVER and ACTIVE, are not working for that elements, why.. this code must do it or that was what i think.. =( pls help me learn.

css code

/* COMIENZA  TOP NAVI*/
 .topnavi a {
    width:90px;
    height:65px;
    float:left;
    margin:3px;
    background:url(../imagenes/topnav_01.png) 0 0 no-repeat;
    display:block;
    font-size:1px;
}


#tn02 {background:url(../imagenes/topnav_02.png) 0 0 no-repeat;}     
#tn03 {background:url(../imagenes/topnav_03.png) 0 0 no-repeat;}
#tn04 {background:url(../imagenes/topnav_04.png) 0 0 no-repeat;}
#tn05 {background:url(../imagenes/topnav_05.png) 0 0 no-repeat;}




/* mouseover state */
.topnavi a:hover {
    background-position:0 -65px;
}

/* active state (current page state) */
.topnavi a.active {
    background-position:0 -130px;
}        

/* TERMINA TOP NAVI*/

html code

<div class="topnavi">
  <a href="1" class="active" id="tn01"/>
  <a href="2" class="" id="tn02"/>
  <a href="3" class="" id="tn03"/>
  <a href="4" class="" id="tn04"/>
  <a href="5" class="" id="tn05"/>
</div>

Answer 1

ID references take preference over class references. Don’t forget that the “C” in CSS stands for Cascading! Your #tn0* rules are taking precendence over the background-position property you define later.Try adding !important.

/* mouseover state */
.topnavi a:hover {
    background-position:0 -65px !important;
}

/* active state (current page state) */
.topnavi a.active {
    background-position:0 -130px !important;
}