0

このウェブサイトで言語切り替えシステムを試しています。アイデアは、ホバーすると、使用可能な言語のリストを含むドロップダウンボックス（ULベース）を表示するSPANを用意することです。これが私が達成しようとしている効果のスナップショットです。

代替テキストhttp://img337.imageshack.us/img337/3474/dropboxfinal.png

ドロップダウンボックスは、実際には順序付けされていないリストであり、デフォルトで非表示になっています。スパンにカーソルを合わせると、ULが表示されます。これがHTMLと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; }

ただし、ドロップダウンがスパンに合わせて表示されるのではなく、ブラウザの右端に表示されます。これがスクリーンショットです。

代替テキストhttp://img84.imageshack.us/img84/1687/dropbox.png

ここにあるCSSの達人のいずれかが、これに対する修正を推奨できますか？

ありがとう、m ^ e

4

1 に答える 1

2

「スパン」の位置を「相対」に設定し、固定幅を「スパン」に設定し、値「上」と「左」(#langlist に適用) で少し再生して、垂直方向と水平方向の配置を管理します。リストの！

編集（質問への回答）：デフォルトでは、絶対位置を持つ要素をWebページに配置すると、その位置（属性「上」と「左」で定義）はhtmlページに対して相対的に計算されます.. . したがって、"left" と "top" の値は、原点が左上隅である見かけの座標系の "x" と "y" 座標です。

Web ページの先頭にある要素については (ほとんどの場合) 問題はありませんが、ページのコンテンツに絶対的に配置されている要素は常にその位置にロックされているため、次の場合にページのコンテンツと共に移動しません。ユーザーが Web ページをスクロールまたはサイズ変更します。

絶対配置タグを含む要素 (この場合はスパン) の位置を「相対」に設定すると、「上」と「左」の値はこのコンテナーに対して相対的に計算されるため、問題は修正されます。

あなたのコードについて:技術的には、Doctype が HTML5 でない場合、非リンク要素に "hover" 疑似クラスを適用することはできません。 #label でホバー イベントが発生します。ただし、次のようにコードを修正できます。#langlist の「margin-top」値を変更して、#label からリストまでの距離を管理します。

<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↓&lt;/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>

このソリューションは IE6 では機能しないことに注意してください。

于 2009-11-04T14:18:46.947 に答える