Consulta sobre desplegables "tamaño mural"

[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>
  ...