different UL css......how can i mnake.

i make this code for horizontal bar

ul {
margin: 0;
padding: 0;
list-style-type: none;
}

ul li {
float: right;
padding: 5px;
}

li A {
FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none;
}

---------

now i have other varticle nav bar so how can i define to different class for diff. navigation???

 

Here is the css for the first menu; i just changed "ul" to "#menu1".

#menu1 {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu1 li {
float: right;
padding: 5px;
}

#menu1 li A {
FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none;
}

Code (markup):

Here is the html.

<ul id="menu1">
<li>....</li>
<li>....</li>
</ul>

Code (markup):

Here is the css for the second menu.

#menu2 {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu2 li {
float: right;
padding: 5px;
}

#menu2 li A {
FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none;
}

Code (markup):

here is the html for the second menu.

<ul id="menu2">
<li>....</li>
<li>....</li>
</ul>

Code (markup):

 

how can i set back ground image in <li>

like

home

product

service

about us