Need help with CSS based absolute positioned UL alignment (dropdown effect)

Question

Hey folks, I'm trying to a language switching system in this website. The idea is to have a SPAN which upon hover displays a dropdown box (UL based) that contains a list of available languages. Here's a snapshot of the effect I'm trying to achieve.

The dropdown box is actually an unordered list that is hidden by default. Upon hovering on the span, I'm making the UL visible. Here's the HTML and the CSS.

HTML

<span id="langswitch">Language↓
    <ul id="langlist">
     <li class="en">
      <a title="Current language: English" href="http://domain/en"&gt;
       <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"&gt;
       <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"&gt;
       <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; }

But instead of the dropdown appearing aligned with my span, it's appearing at the extreme right end of the browser. Here's the screenshot.

Can any of the CSS gurus here recommend a fix for this?

Thanks, m^e

Answer 1

Hello,

just set the position of the "span" to "relative", set a fixed width to the "span" and play a bit with the values "top" and "left" (applied to #langlist) to manage the vertical and horizontal alignment of the list!

---

EDIT (IN RESPONSE TO YOUR QUESTION): By default, when you place in a web page an element with an absolute position, its position (defined by the attributes "top" and "left") is calculated relatively to the html page ... so, the "left" and "top" values are the "x" and "y" coordinates of an apparent coordinate system whose origin is the top-left corner.

For elements in the head of the webpage there is no problem (in the most of cases), but the elements absolutely positioned in the content of the page are constantly locked on their position so they don't move with the content of the page if the user scrolls or resizes the web page!

If you set to "relative" the position of the element (in this case the span) that contains the absolutely positioned tag, the values "top" and "left" are calculated relatively to this container, so the problem it's fixed!

ABOUT YOUR CODE: Technically you can't apply the "hover" pseudo-class to non link elements if your Doctype is not HTML5, so my suggestion is to consider to use a jQuery function to apply "display: block" to the list when occurs an hover event on the #label. However, you can correct your code as follow ... manage the distance of the list from the #label modifying the "margin-top" value of #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"&gt;
                <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"&gt;
                <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"&gt;
                <img width="16" height="13" alt="Chinese Language" src="flag-zh.gif" /> 
                Chinese
            </a>
        </li>
        </ul>
    </li>
    </ul>
</div>

Notice that this solution doesn't work on IE6!