Css’de Hover Önceliği

Bazen menü yapımında şöyle bir sorunla karşılaşıyoruz.. Örneğin menüye hover ve aktif işlemleri uyguluyoruz.. Bir menü aktifken üzerine gelince hover işlemi gerçekleşiyor.. Halbuki aktif için bunun olmaması gerekir.. Peki böyle bir durumda ne yapmamız gerekecek? Öncelikle olası menü yapımız şöyle olsun;

<ul class="menu">
    <li><a href="#">Menü 1</a></li>
    <li class="aktif"><a href="#">Menü 2</a></li>
    <li><a href="#">Menü 3</a></li>
    <li><a href="#">Menü 4</a></li>
</ul>

Şimdi bu menü yapısına uygun css kodlarımız ise şöyle;

ul, li {
    padding: 0; margin: 0; list-style: none; font-family: Arial; font-size: 14px
}
a { text-decoration: none }

/* menü */
ul.menu {
    overflow: hidden
}
ul.menu li {
    float: left
}
ul.menu li a {
    display: block;
    padding: 8px 15px;
    color: #111
}
ul.menu li.aktif a {
    background: darkred;
    color: #fff
}
ul.menu li a:hover {
    background: #111;
    color: #fff
}

Ancak bu şekilde, aktif olan menü üzerine gelindiğinde de yine aynı şekilde hover işlemi uygulanır.. Bunun sebebi, aktif bölümünü yazdığımız css kodlarının, hover işleminden önce yazılmış olmasıdır.. Yani aktif ve hover şöyle yer değiştirirse;

ul.menu li a:hover {
    background: #111;
    color: #fff
}
ul.menu li.aktif a {
    background: darkred;
    color: #fff
}

Sorunumuz çözülür ????