Twitter Bootstrap顶部栏下拉列表更改垂直大小

Question

我在向Twitter Bootstrap框架添加下拉列表时遇到问题。添加下拉列表后，它会扩展整个顶部栏的高度，这就是我想要解决的问题。

网页网址为http://locabikes.de/

如果将鼠标悬停在＆＃34; DE＆＃34;右上角的符号会显示下拉列表但顶部栏也会更改它覆盖导航栏的垂直尺寸。

有没有办法只显示其他语言而不改变顶部栏的大小？ 这是我正在谈论的代码：

<div class="col-sm-12 col-sm-no-pd">
<ul id="lng">
    <li>
        <span>DE</span>
        <ul>
            <li><a href="http://locabikes.com">EN</a></li>
            <li><a href="http://locabikes.pl/">PL</a></li>
        </ul>
    </li>
</ul>
<div id="topSocial">
    <a href="http://www.facebook.com/locabikes" target="_blank" class="icon icon-facebook"></a>
    <a href="https://www.pinterest.com/locabikes/" target="_blank" class="icon icon-pinterest"></a>
    <a href="https://instagram.com/loca_bikes/" target="_blank" class="icon icon-instagram"></a>
</div>

这就是我想要在当前语言超链接上移动后的样子。

Answer 1

由于您使用的是bootstrap，我建议您将ul＃lng的标记更改为bootstrap文档为下拉列表提供的标记。

http://getbootstrap.com/components/#dropdowns

默认情况下，下拉列表适用于点击，但通过以下调整，它也适用于悬停：

http://www.joostrap.com/support/tutorials-videos/202-how-to-enable-hover-for-nav-dropdowns

希望这可以帮助你：）

Answer 2

原来我只需要删除 来自父#topbar div的overflow: hidden属性，它开始工作。