0

我正在尝试在这个网站上使用语言切换系统。这个想法是有一个 SPAN，它在悬停时会显示一个下拉框（基于 UL），其中包含可用语言的列表。这是我想要达到的效果的快照。

替代文字 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

只需将“span”的位置设置为“relative”，将固定宽度设置为“span”并使用值“top”和“left”（应用于#langlist）来管理垂直和水平对齐名单！

编辑（针对您的问题）：默认情况下，当您在网页中放置一个具有绝对位置的元素时，其位置（由属性“top”和“left”定义）是相对于 html 页面计算的。 . 所以，“left”和“top”值是原点为左上角的视坐标系的“x”和“y”坐标。

对于网页头部的元素没有问题（在大多数情况下），但是绝对定位在页面内容中的元素会不断锁定它们的位置，因此它们不会随着页面内容移动用户滚动或调整网页大小！

如果您将包含绝对定位标记的元素（在本例中为 span）的位置设置为“相对”，则值“top”和“left”是相对于该容器计算的，因此问题已解决！

关于您的代码：从技术上讲，如果您的 Doctype 不是 HTML5，则不能将“悬停”伪类应用于非链接元素，因此我的建议是考虑使用 jQuery 函数将“显示：块”应用于列表时在#label 上发生悬停事件。但是，您可以按如下方式更正您的代码...管理列表与 #label 的距离，修改 #langlist 的“margin-top”值：

<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 回答