html - CSS タブのカラーリングの問題

Question

/* Navigation
--------------------------------------------------------------------------------*/

#nav-wrap .container {
    clear: both;
    overflow: hidden;
    position: relative;
}

#nav-wrap .container table, #nav-wrap .container table tr, #nav-wrap .container table tr td, #nav-wrap .container table tbody {
    vertical-align:bottom;
}

td#nav {
    float:right;
    border-spacing:0;
}
#navigation {
    line-height: 1;
    float: right;
}

#navigation ul {
    list-style: none;
    float: left;
    width:946px;
    height:44px;
    margin-bottom:-1px;
}

#navigation li {
    display: inline;
    position: relative;
    list-style: none;
    float: left;
    /* THIS IS WHERE YOU CHANGE THE MARGIN OF THE TABS */
    margin:0 0 0 0px;
}

したがって、ここでタブを編集するためのコーディングが行われます。私の問題は、すべてのタブを異なる色にする必要があることですが、何を変更すればよいかわかりません。画像を作成してアップロードしようとしましたが（必要なすべての色を含む虹型の画像）、オーバーレイする代わりに、個々のタブで画像を繰り返しました。独立したタブの色を変更する方法はありますか?

#navigation li.wsite-nav-0 {margin-left:0;}
/* THIS IS WHERE YOU EDIT ALL OF THE TABS AND WHAT-NOT */
#navigation ul li a {
    display: block;
    color: #333;
    text-decoration: none;
    padding:4px 0 4px 0;
    margin:0;
    width:130px;
    border: 0;
    outline: 0;
    list-style-type: none;
    box-sizing:border-box;
    float: left;
    font:11px Georgia, serif;
    border-top:8px solid #939598 ;
    /* background: url(menu.png)  ; */
}
/* THIS IS WHERE THE COLORS AND WHAT-NOT IS FOR THE ACTIVE/HOVERED TABS */
#navigation ul li#active a{
    border-top:8px solid #343434 ;  
    color: #000;

}

これは、マウスをホバーしたときのコードです。色を変更して、オプションの上にホバーしたことを示しているだけです。

#navigation ul li a:hover {
    border-top:8px solid /*#404041 */;
    color: #666;

}