Personalizar 2 listas con CSS

[RabidFish]

Hola a todos.
Soy nuevo en el tema del CSS y espero que puedan darme una mano. El tema es este:
En una página tengo una lista dentro de otra con HTML, para dejarlo claro:

Código:

<ul>
<li>Categoría 1</li>
	<ul>
	<li>Ítem 1 de la cat. 1</li>
	<li>Ítem 2 de la cat. 1</li>
	</ul>
<li>Categoría 2</li>
	<ul>
	<li>Ítem 1 de la cat. 2</li>
	<li>Ítem 2 de la cat. 2</li>
	</ul>
</ul>

Lo que quiero hacer es que la lista principal de categorías tenga una imagen como ítem y que las sub-listas (las que dicen ítem 1 y 2) tengan una imagen diferente. Para esto pensé hacer esto:
HTML

Código:

<ul class="1">
<li>Categoría 1</li>
	<ul class="2">
	<li>Ítem 1 de la cat. 1</li>
	<li>Ítem 2 de la cat. 1</li>
	</ul>
<li>Categoría 2</li>
	<ul class="2">
	<li>Ítem 1 de la cat. 2</li>
	<li>Ítem 2 de la cat. 2</li>
	</ul>
</ul>

CSS

Código:

ul.1 {
	list-style-image: url(imagenes/item_1.gif);
}
ul.2 {
	list-style-image: url(imagenes/item_2.gif);
}

Es decir que llamé a cada lista con un número distinto (1 y 2) y en el estilo.css especifiqué la imagen que debería llevar cada lista en sus ítems. El problema es que las imágenes no aparecen en lugar de los ítems, pero sí lo hacen si quito el class="1" y class="2" y el .1 y .2 del CSS. Estoy bastante seguro de que estoy nombrando mal a las listas en el CSS pero no sé cómo se debe hacer, espero sus respuestas.
Saludos.