사이드 메뉴에 2차 메뉴가 나옵니다..

아래 메뉴처럼 나오는것을....

한칸마다 다른 배경색으로 나오게하려면 어떻게 해야 하나요???

HTML

<div class="lnb css3pie">
	<h2 loop="$main_menu->list=>$key1,$val1" cond="$val1['selected']"><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a></h2>
	<ul class="locNav" loop="$main_menu->list=>$key1,$val1" cond="$val1['selected'] && $val1['list']">
		<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
			<ul cond="$val2['list']">
				<li loop="$val2['list']=>$key3,$val3" class="active"|cond="$val3['selected']"><a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$val3['link']}</a></li>
			</ul>
		</li>
	</ul>
</div>

CSS

.lnb{position:relative;width:230px;float:right;background:#ffffff; padding:10px; margin-top:10px; opacity:0.95; filter: alpha(opacity=95); border:1px solid #cccccc; border-radius:10px; z-index:100;}
.lnb h2{margin:0}
.lnb h2 a{display:block;padding:10px 0 10px 20px;text-decoration:none;color:#333}
.locNav{border-top:0px solid #880000;padding:4px 5px;width:190px;margin:0 0 1em 0;list-style:none}
.locNav li{padding:0 0 4px 0;vertical-align:top}
.locNav li a{padding:6px 5px 6px 13px;display:block;border:1px solid #000000;border-left:0;border-right:0;background:#000000;color:#ffffff;position:relative;text-decoration:none}
.locNav li.active a{color:#fff;background:#000000;border:1px solid #000000;border-left:0;border-right:0}
.locNav li ul{display:block;position:relative;width:184px;padding:0 3px;margin:0;border-top:0px solid #fff;overflow:hidden}
.locNav li li{padding:0;border-top:1px solid #333333;position:relative;top:-1px}
.locNav li li a{padding:6px 5px 6px 10px;width:169px;color:#818181 !important;border:none;background:none !important;border:none !important}
.locNav li.active li.active a{color:#ff1a00 !important;background:url(../images/default/bulletLnb.gif) no-repeat 175px center  !important}