Consulta sobre desplegables "tamaño mural"

[Linton]

Para que se entienda, podéis ver lo que llamo desplegables murales en la web de Bally

Y ahora la duda con CSS: tengo que montar un menú principal con <ul>, dentro del cual habrá divs desplegables con varios divs interiores, cada uno con sendas <ul>.

Antes de ponerme a acumular clases en html y reglas en CSS para los sucesivos <ul> y <li>, a fin de evitar que hereden los valores del menú principal, ¿algún consejo?

Pienso que si pongo <span> en vez de <ul> dentro de los divs interiores me quitaré de un plumazo mucho código. ¿Es aconsejable, o debo hacer <ul> escalonados?

Gracias de antemano, un saludo.

[pzin]

Semánticamente es incorrecto (ver "content model") que una lista tenga hijos que sean div. Es decir, esto así no valdría:

Código HTML:

<ul>
  <div></div>
  ...
 

No es válido en HTML5 ni XHTML, ni tan siquiera en HTML4.

Así que tendría que ser, si acaso, algo así:

Código HTML:

<ul>
  <li>
    <div></div>
  </li>
  ...
 

Consejo, pues puedes usar, que es muy habitual, el selector > que sirve para hacer referencias a elementos hijos, no a todos los elementos descendientes como suele ocurrir con los selectores CSS.

Esto afectaría solo a los li que estén dentro de una lista que sea hija de un elemento cuyo identificador sea algo:

Código CSS:

#algo > ul li
 

Y si, si haces una lista, es siempre mejor que esté bien estructurada. Dentro de los elementos de cada lista, dentro de li, puedes poner cualquier cosa que puedes poner en un div, pero no dentro de ol o ul. Entonces algo así sería correcto:

Código HTML:

<ul>
  <li>
    <div>
      <span>Título</span>
      <img src="perro.jpg">
      <ul>
        <li><a href="#">Wuuf</a></li>
        <li><a href="#">Woof</a></li>
        <li><a href="#">Wauf</a></li>
      </ul>
    </div>
    <div>
      <span>Gatos</span>
      <img src="gato.jpg">
      <ul>
        <li><a href="#">Meow</a></li>
        <li><a href="#">Miau</a></li>
        <li><a href="#">Mau</a></li>
      </ul>
    </div>
  </li>
  ...
 

[Linton]

¡Muchas gracias, maestro! Ha sido una gran ayuda, un saludo.