Listas anidadas

[GERTU]

Tengo un problema con una lista anidada que no sé cómo resolver para que valide, y además se vea bien. Se trata de una lista de áreas, y dentro de cada área hay distintas actividades (que se despliegan al pinchar en los títulos de las áreas).

Código:

<ul>
  <li>Área 1</li>
     <ul>
          <li>Actividad 1</li>
          <li>Actividad 2</li>
          <li>Actividad 3</li>
     </ul>
  <li>Área 2</li>
     <ul>
          <li>Actividad 1</li>
          <li>Actividad 2</li>
          <li>Actividad 3</li>
     </ul>
</ul>

En la hoja de estilo, le he puesto un list-style-image a las áreas, y se lo he quitado a las actividades, de la siguiente manera:

Código:

ul
	{
	list-style-image: url(./dot.png);
	}
ul ul
	{
	list-style-image: none;
	}

Se ve perfecto, es eso exactamente lo que busco. Pero voy a validar y me encuentro con que el código no es válido. No puedo meter un UL dentro de otro UL directamente, tengo que "meter por medio" un LI. De la siguiente manera:

Código:

<ul>
  <li>Área 1</li>

  <li><!-- aquí el LI añadido -->

         <ul>
               <li>Actividad 1</li>
               <li>Actividad 2</li>
               <li>Actividad 3</li>
         </ul>

  </li><!-- se cierra el LI añadido -->

</ul>

Bien, no pasa nada, me parece lógico y razonable, y además hacer el cambio es sencillo. Pero ahora hay un problema: el segundo UL (el que va "anidado" dentro del otro) pasa a estar dentro de un LI, y por lo tanto aparece a la izquierda del todo (a la altura del primer UL) la imagen DOT.PNG que he especificado en la hoja de estilo para los elementos LI. Por supuesto, mi intención no era que apareciera esa imagen ahí.

¿Cómo puedo hacer para que el elemento LI que contiene un elemento UL (lista anidada) no muestre la imagen?

PD: Estaba a punto de pulsar el botón de envío, cuando se me ha ocurrido la solución: crear una nueva clase para los elementos LI que contienen un elemento UL, con atributo list-style: none;, de la siguiente manera:

Código:

li.no
	{
	list-style: none;
	}

De esta manera, me bastará con ponerle class="no" a los elementos LI que vayan a contener un elemento UL. Se me antoja una solución un poco chapucera, pero funciona. De todas maneras, si alguien conoce una solución más elegante, agradeceré cualquier propuesta.

Muchas gracias.


PD bis: Mi gozo en un pozo. Funciona a la perfección en Firefox, en Opera y en Konqueror, pero falla en MSIE6 (no tengo MSIE7 para probar). Odio ese maldito navegador del demonio. ¿Alguien sabe qué puedo hacer, aparte de prohibir el acceso a la web a usuarios de MSIE?

[GERTU]

Listo, lo he arreglado, y ya valida. Lo he hecho de la siguiente manera:

Código:

<ul>
  <li>Área 1 <!-- no cierro el list-item, para que la lista anidada quede dentro -->

         <ul>
               <li>Actividad 1</li>
               <li>Actividad 2</li>
               <li>Actividad 3</li>
         </ul>

  </li><!-- ahora cierro el list-item que he dejado abierto -->

</ul>

Hay una cosa que no funciona del todo bien, pero bueno, tampoco es tan importante. Al pulsar en un título de área, se despliega la lista de actividades que contiene, y si hago click en una actividad se vuelve a replegar la lista, algo que funciona correctamente. Pero si selecciono con el ratón el texto de alguna de las actividades (para copiarla), con MSIE la lista se vuelve a replegar, y con Firefox se repliega salvo que seleccione más de un elemento de la lista de actividades. Con Opera y con Konqueror la selección no se interpreta como un click, y no se repliega, que es precisamente lo que me interesa. De todas maneras, este pequeño "bug" no me preocupa. Lo doy por resuelto.