Duda sobre las imagenes de una lista

[Dav1d]

Hola

No sé mucho de css, suelo programar y ya está, pero ahora me ha tocado hacer algún css sobre una lista, con ul y li.

Quiero hacer esto.

El primer padre de cada lista, tiene que tener una imagen como viñeta y un tipo determinado de letra. Pero sólo en el primero, no en los submenús.

luego, el primer submenú, por ejemplo,

-Ciudades
--Málaga
--Sevilla

Si este submenú es el último, ojo si es el último tiene que tener un diseño y si hay otro por detrás, pues otro diseño. El último submenu y siempre que sea submenu y no principal, es decir, si el principal, no tiene submenú no vale. Tiene que tener un diseño.

Por ejemplo
A)
Ciudades

B)
-Ciudades
--Málaga
--Sevilla

C)
-Ciudades
---Malaga
------Marbella
-----Fuengirola
--Sevilla
----Utrera

Ciudades en A, B y C, tiene la misma imagen viñeta y el mismo tipo de texto.

En B Málaga y Sevilla, al ser la última opción , tiene el mismo diseño que las de C Marbella,Fuerngirola y Utrera.

En C, Málaga y Sevilla, tienen un diseño independiente, por ser la segunda opción y no ser la última.

Sólo hay 3 niveles como en el ejemplo.

Espero que lo haya explicado bien, y alguien pueda ayudarme u orientarme, o igual un link con la explicación, busco en google y no encuentro una forma de explicación adecuada.

Saludos

[mortiprogramador]

Hola
Bueno, si te entendi bien quieres algo como esto

Si es así, entonces este es el código que necesitas

Código HTML:

<ul>
  <li id="ciudades1">a)Ciudades
  </li>
  <li id="ciudades1">b)Ciudades
    <li id="ciudades3">Malaga</li>
    <li id="ciudades3">Sevilla</li>
  </li>
  <li id="ciudades1">c)Ciudades
    <li id="ciudades2">Malaga</li>
      <li id="ciudades3">Marbella</li>        
      <li id="ciudades3">Fuengirola</li>
    <li id="ciudades2">Sevilla</li>
      <li id="ciudades3">Utrera</li>
  </li>
</ul>
 

Código CSS:

#ciudades1{
  list-style-image:url(ciudad1.gif);
  font-family:Verdana;
  font-size:16px;
  margin:6px 0px 0px 0px;
}
#ciudades2{
  list-style-type:circle;
  background-position: right;
  font-family:Arial;
  font-size:14px;
  margin:0px 0px 0px 10px;
}
#ciudades3{
  list-style-type:square;
  font-family:Comic-Sans;
  font-size:12px;
  margin:0px 0px 0px 20px;
}
 

Y en este ejemplo esta hecho manualmente, pero si por ej en tu caso
vas creando los <li> dinámicamente, entonces es solo cuestión
de usar condicionales (if, etc) donde preguntes si el segúndo nivel tiene
hijos, y si es así que le ponga un id y si no que le ponga otro y con eso
bastaría

Espero te sirva
Saludos