Цветное меню - отдельный цвет фона для каждой ячейки

Требуется создать Цветное меню - отдельный цвет фона для каждой ячейки
пробую создать меню из списка с идентификаторами, не выходит.

HTML:

1. <div id="menu_cont">
2.           <ul>
3.           <li id="1"><a href="#">ABOUT US</a>
4.           </li>
5.           <li id="2"><a href="#" >THE SPA</a>  
6.           </li>
7.           <li id="3"><a href="#">TREATMENTS</a>
8.           </li>
9.           <li id="4"><a href="#">CLASSES</a>
10.           </li>
11.           <li id="5"><a href="#">CONTACT</a>
12.         </ul>
13.           </div>
14.  

[css]#menu_cont ul {
font-size: 0.85em;
margin: 0;
padding: 0;
list-style: none;
}
#menu_cont li {
display: inline;
float: left;
}
#menu_cont li a {
display: block;
padding: 7px 20px;
color: #003388;
margin-right: 2px;
}
#menu_cont li a:hover {
display: block;
padding: 7px 20px;
color: #333;
margin-right: 2px;
}
#menu_cont li span {
display: block;
padding: 6px 20px;
color: #555;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-right: 2px;
}
#menu_cont #1 {
background-color: #ddC6;
}
#menu_cont #2 {
background-color: #3C6;
}
#menu_cont #4 {
background-color: #3C6;
}[/css]
Что я неправильно делаю?

 

с атрибутами разобрался. а при таком CSS выходит разные цвета для каждого id:

HTML:

1.   <div id="menu_cont">
2.           <ul>
3.           <li id="m1"><a href="#">ABOUT US</a>          </li>
4.           <li id="m2"><a href="#">THE SPA</a>          </li>
5.           <li id="m3"><a href="#">TREATMENTS</a>          </li>
6.           <li id="m4"><a href="#">CLASSES</a>          </li>
7.           <li id="m5"><a href="#">CONTACT</a>        </ul>
8.           </div>

[css]#menu_cont ul {
font-size: 0.85em;
margin: 0;
padding: 0;
list-style: none;
}
#menu_cont li {
display: inline;
float: left;
}
#menu_cont li a {
display: block;
padding: 7px 20px;
color: #003388;
margin-right: 2px;
}
#menu_cont li a:hover {
display: block;
padding: 7px 20px;
color: #333;
margin-right: 2px;
}
#menu_cont li span {
display: block;
padding: 6px 20px;
color: #555;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-right: 2px;
}
#m1 {
background-color: #3C6;
}
#m2 {
/*background-color: #3C6;*/
}
#m3 {
background-color: #3C6;
}

#m4 {
/*background-color: #3C6;*/
}[/css]