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?