html - Twitter Bootstrap topbar 下拉菜单更改垂直大小

Question

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

页面 URL 是 http://locabikes.de/

如果将鼠标悬停在右上角的“DE”符号上，将显示下拉菜单，但顶部栏也会更改其覆盖导航栏的垂直大小。

有没有什么方法可以在不改变顶栏大小的情况下只显示其他语言供选择？ 这是我正在谈论的代码:

<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

希望这对你有帮助:)