contenedor no se adapta a contenidos

[_franb]

intentaré ser más específico colega.

Construí el siguiente ejemplo de modo muy rudimentario:
[URL="fbergamaschi.com.ar/experience/"]ejemplo[/URL]

Código HTML:

<style>
nav { width:800px; height:30px; margin:0 auto; border-style:solid none; border-color:#666666; border-width:1px 0}
ul { width:100%; height:100%; padding:0; margin:0; list-style:none}
li { width:100px; height:100%; position:relative; font:bold 14px Arial, Helvetica, sans-serif; text-align:center}
	li:hover { background-color:#cccccc}
	li:hover > div.desplegable { display:block}
div.desplegable { display:none; position:absolute; top:100%; background-color:#CCCCCC; border:1px solid #999999; padding:20px; overflow:hidden; white-space: nowrap;}
div.desplegable > figure { float:left; width:24px; height:25px; margin:0 10px 0 0;}
div.desplegable > p { float:left; white-space:nowrap; font:14px Arial, Helvetica, sans-serif; margin:0}
</style>

<nav>
     <ul>
    	<li>item men&uacute;
        	<div class="desplegable">
            	<figure><img src="nav-user-drop.png" alt="avatar" /></figure>
                <p>Lorem Ipsum</p>
            </div>
        </li>
    </ul>
</nav> 

Quisiera que 'div.desplegable' tenga una ancho dinámico (adaptable) de acuerdo al contenido en su interior.
Como la imagen como el texto en '.desplegable' es traído de modo dinámico (por consulta a BD), no puedo saber de antemano qué tamaño ocupará.

Me gustaría generar esto mediante CSS evitando usar un script que sume el ancho de los contenidos y me devuelva un ancho fijo para el contenedor. Pero si no existe solución iré por el script.

Al parecer, en Chrome funciona, pero no en Firefox

Es más clara ahora mi consulta?

gracias!

p/d: cómo incluyo código CSS en los post del FORO? sólo me da la opción para HTML