Necesito poner un background que rellene una lista

[fede5426]

Si es lo que yo entendi, lo que queres es llegar a esto cierto?




Si es asi proba borrando los "ul" deja solo el primero.. el resto que sean "li", y a las clases lista, sublista, subsublista y subsubsublista agregales una indentacion.

El "aside" te quedaria asi:

Código HTML:

<aside>
        <ul>
            <li class="home">Home</li>
			
				<li class="lista">Opcion 1</li>
                    <li class="sublista">Página 1.1</li>
                    <li class="sublista">Página 1.2</li>
					
                <li class="lista">Opcion 2</li> 
                        <li class="subsublista">Opcion 2a</li>
                            <li class="subsubsublista">Página 2a.1</li>
                            <li class="subsubsublista">Página 2a.2</li>
						<li class="subsublista">Opcion 2b</li>
                            <li class="subsubsublista">Página 2b.1</li>
                            <li class="subsubsublista">Página 2b.2</li>
					<li class="sublista">Página 2.1</li>
					<li class="sublista">Página 2.2</li> 
					
                <li class="lista">Opcion 3</li>
						<li class="subsublista">Opcion 3a</li>
							<li class="subsubsublista">Página 3a.1</li>
							<li class="subsubsublista">Página 3a.2</li>
        </ul>
    </aside> 

y las clases mas o menos asi:

Código CSS:

.lista{
text-indent:25px;
background-color: #A1A19F;
list-style-image: url('../img/carpeta3.png');
list-style-position: inside; 
}
.sublista{
text-indent:75px;
background-color: #939594;
list-style-image: url('../img/carpeta2.png');
 list-style-position: inside; 
}
.subsublista{
text-indent:100px;
background-color: #BABABA;
list-style-image: url('../img/carpeta4.png');
list-style-position: inside; 
}
.subsubsublista{
text-indent:125px;
background-color: #D0D2D1;
list-style-image: url('../img/carpeta5.png');
list-style-position: inside; 
}
 

No se si es la mejor solucion, pero probala por ahi te sirve.

Saludos.