リストを2つに分割して、それぞれに違う色の背景色を表示させたい。

サンタともうします。
1－6までリストがあります。リストでボタンを作りました。1－3までは赤、4－6までは青の背景色を設定したいのですが、上手く行きません。
実行したことは、listが2グループあるので１－３と４－６それぞれ別々のDIVを用意して、#ao #akaを用意して、それぞれに別べつに背景色を設定しました。上手く行かなかったので、さらにliにclassを設定しbtn_aka,btn_aoで背景色を適用してみましたが、背景色が設定できませんでした。

何か方法はございますでしょうか？DIVを分けて適用する前には、Divなしでlistへのclass記述だけしてみましたが、それも適用されませんでした。

なぜ出来ないのでしょうか？また、もっと簡単な方法があるのでしょうか？
CSSボタンを作成しております。
宜しくお願いいたします。
失礼致します。

<di>v id="aka">
<ul>
<li class="btn_aka"><a href="/">1</a></li><!--それぞれボタンです-->
<li class="btn_aka"><a href="/">2</a></li>
<li class="btn_aka"><a href="/">3</a></li>
</ul>
</div>
<div id="ao">
<ul>
<li class="btn_ao"><a href="/">1</a></li><!--それぞれボタンです-->
<li class="btn_ao"><a href="/">2</a></li>
<li class="btn_ao"><a href="/">3</a></li>
</ul>
</div>

CSS***************
#aka


#nav ul{
margin: 0;
padding: 0;
list-style: none;
}
#nav li{
display: inline;
padding: 0;
margin: 0;
}
#nav li a{
display: block;
border-left: 8px solid #39B146;
background-color: #FEFE98;
padding: 7px 10px;
text-decoration: none;
color: 333;
width: 200px;
margin: 1px 0px;
text-align: left;
font-size: 1.5rem;
font-weight:600;
}

#nav li a:hover{
border-left: 8px solid #39B146;
background-color: #39B146;
color:#fff;
font-weight:600;
}