aktywny odnosnik z menu

[rafalski_4]

Witam
Uporałem się z problemami z szablonem. Został mi (chyba) tylko jeden błąd z menu. Tu jest mój kod css z menu:

nav {
    height:40px;
    width:100;
    background: url('../img/tlo.png') repeat-x;
    border-top: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
    
}
#menu {
    width:1200px;
    margin: 0 auto;
    
}
#menu ul {
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;


   
}
#menu ul li {
   display: block;
   float: left;
   list-style: none;
   position: relative;

   
}
#menu ul li a {
   display: block;
   margin: 0 0 0 3px;
   padding: 0px 10px;
   color: #777;
   text-decoration: none;
   line-height: 40px;
   /*animacja*/
       -moz-transition:color 0.2s ease-out;
    -webkit-transition:color 0.2s ease-out;
    -o-transition:color 0.2s ease-out;
    transition:color 0.2s ease-out;
}
#menu ul li a:hover {
   background: url('../img/hover.png') repeat-x;
   color: #fff;
}
#menu .active {
   background: url('../img/active.png') repeat-x;
   color: #fff;
}

Wg mnie aktywny button powinien mieć tło /img/active.png i kolor tekstu koloru białego. O ile aktywny przycisk tło przyjmuje dobre, to kolor tekstu jest #777. Jest to na pewno związane z #menu ul li a , ale nie potrafię tego zrobić tak, żeby było tak jak powinno być, tzn normalny przycisk bez tła i kolor tekstu #777. Hover: kolor tła hover.png i kolor tekstu #fff. Nie działa tylko kolor buttonu aktywnego.
Prosze o pomoc

[zwiastun]

To daj !Important przy regule koloru

[rafalski_4]

Niestety nie działa;/

#menu .active {
   background: url('../img/active.png') repeat-x;
   color: #fff !important;
}

[marian_mk]

NIE:

#menu .active {
   background: url('../img/active.png') repeat-x;
   color: #fff;
} 

a TAK:

#menu li.active a{
   background: url('../img/active.png') repeat-x;
   color: #fff;
} 

[rafalski_4]

Dzięki wielkie Marian_MK . Działa