リストを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;
}

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2015/05/15 09:21

スタイルシートを期待通りに動作させるためにはHTMLがよくないと・・

<div class="nav"><!-- classやidはデザインのためじゃなく文書構造を示すため -->
　<ul>
　　<li><a href="/A">A</a></li>
　　<li><a href="/B">B</a></li>
　　<li><a href="/C">C</a></li>
　</ul>
　<ul>
　　<li><a href="/D">D</a></li>
　　<li><a href="/E">E</a></li>
　　<li><a href="/F">F</a></li>
　</ul>
</div>
div.nav{
text-align:center;/* 継承される */
line-height:20px;/*継承される */
font-size:2px;/* ボタン間の間隔 */
width:60%;margin:0 auto;/* 幅60%,左右中央 */
position:relative;/* 以下の一屋サイズの基準 */
}
div.nav ul,div.nav ul li{
list-style-type:none;
margin:0padding:0;
}
div.nav ul li{
display:inline-block;
width:30%;
position:relative;
}
div.nav ul li a{
display: block;
border-left: 8px solid #39B146;
background-color: #FEFE98;
width:100%;height:100%;
text-decoration: none;
color: 333;
}
div.nav ul li a:hover{
border-color:#39B146;
background-color: #39B146;
color:#fff;
}
div.nav ul+ul li a{
border-color: red;
background-color: lime;
}
div.nav ul+ul li a:hover{
border-color: blue;
background-color: green;
}

この回答へのお礼

ORUKA1951 様

いつもお世話になっております。
とてもお詳しいですね。
なるほど、とてもシンプルな書き方で適応できます。
hmltもこんなにスッキリしていて、綺麗です。
もっと勉強せねば。。。。

ありがとうございました。(^^)

お礼日時：2015/05/15 13:46