Necesita ayuda con CSS alineación UL basado absoluta posicionado (efecto desplegable)

Question

Estoy tratando de un sistema de cambio de idioma en esta página web. La idea es tener un SPAN que al vuelo estacionario muestra un cuadro desplegable (basado UL) que contiene una lista de los idiomas disponibles. He aquí una instantánea del efecto que estoy tratando de lograr.

texto alternativo http://img337.imageshack.us/img337/3474/dropboxfinal .png

El cuadro desplegable es en realidad una lista desordenada que se oculta de forma predeterminada. Al flotando en el lapso, estoy haciendo la UL visible. Aquí está el HTML y el CSS.

HTML

<span id="langswitch">Language↓
    <ul id="langlist">
        <li class="en">
            <a title="Current language: English" href="http://domain/en">
                <img width="16" height="13" alt="English Language" src="flag-en.gif" /> 
                English
            </a>
        </li>

        <li class="th">
            <a title="Switch to Thai language" href="http://domain/th">
                <img width="16" height="13" alt="Thai Language" src="flag-th.gif" /> 
                Thai
            </a>    
        </li>

        <li class="zh">         
            <a title="Switch to Chinese language" href="http://domain/zh">
                <img width="16" height="13" alt="Chinese Language" src="flag-zh.gif" /> 
                Chinese
            </a>
        <li>
    </ul>
</span>

CSS

ul#langlist {
    border:1px solid #3399CC;
    color:#006699;
    background:#fff;
    padding:0 !important;
    width:100px;
    list-style:none;
    position:absolute;
    top:62px;
    right:0;
    z-index:100;
    display:none;
}

span#langswitch:hover ul#langlist { display:block; }

Sin embargo, en lugar de en el menú desplegable apareciendo alineadas con mi capacidad, que está apareciendo en el extremo derecho del navegador. Aquí está la captura de pantalla.

texto alternativo http://img84.imageshack.us/img84/1687/dropbox .png

Puede alguno de los gurús CSS aquí recomendar una solución para esto?

Gracias, m ^ e

Answer 1

acaba de establecer la posición de la "span" a "relativo", estableció un ancho fijo a la "span" y jugar un poco con los valores "superior" e "izquierda" (aplicado a #langlist) para gestionar la vertical, y la alineación horizontal de la lista!

---

Edit (EN RESPUESTA A SU PREGUNTA): Por defecto, cuando se coloca en una página web un elemento con una posición absoluta, su posición (definida por los atributos "superior" e "izquierda" ) se calcula con respecto a la página hTML ... así, la "izquierda" y los valores "superiores" son la "x" e "y" coordenadas de un sistema de coordenadas cuyo origen aparente es la esquina superior izquierda.

Para los elementos en la cabecera de la página web no hay ningún problema (en la mayoría de los casos), pero los elementos con posición absoluta en el contenido de la página están constantemente bloqueado en su posición, de manera que no se muevan con el contenido de la página si el usuario se desplaza o cambia el tamaño de la página web!

Si se establece a "relativo" la posición del elemento (en este caso el lapso) que contiene la etiqueta de posición absoluta, los valores de "superior" e "izquierda" se calculan con respecto a este contenedor, por lo que el problema es fijo !

información sobre su código: Técnicamente no se puede aplicar la "libración" pseudo-clase de elementos no enlace si su Doctype no es HTML5, así que mi sugerencia es considerar utilizar una función de jQuery aplicar "display: block" a la lista cuando se produce un evento en el vuelo estacionario #label. Sin embargo, puede corregir el código como sigue ... gestionar la distancia de la lista de la #label modificando el valor "margin-top" de #langlist:

<style type="text/css">
#container{
    position: relative;
    width:100px;
}

#langswitch{
    padding: 0px;
    margin: 0px;
    list-style:none;
    position:absolute;
}

#langlist {
    border:1px solid #39C;
    color:#069;
    background:#fff;
    padding:0 !important;
    margin-top: 2px;
    width:100px;
    top:20px;
    left:0px; 
    display: none;
}

#container:hover #langlist{
    display:block;
}

img{
    background-color: #CCC;
    border: 1px solid black;
}
</style>


<div id="container">
    <ul id="langswitch">
    <li>
        <a id="label" href="#">Language↓</a>
        <ul id="langlist">
        <li class="en">
            <a title="Current language: English" href="http://domain/en">
                <img width="16" height="13" alt="English Language" src="flag-en.gif" /> 
                English
            </a>
        </li>

        <li class="th">
            <a title="Switch to Thai language" href="http://domain/th">
                <img width="16" height="13" alt="Thai Language" src="flag-th.gif" /> 
                Thai
            </a>    
        </li>

        <li class="zh">                 
            <a title="Switch to Chinese language" href="http://domain/zh">
                <img width="16" height="13" alt="Chinese Language" src="flag-zh.gif" /> 
                Chinese
            </a>
        </li>
        </ul>
    </li>
    </ul>
</div>

Tenga en cuenta que esta solución no funciona en IE6!