更改下拉菜单的显示位置？

Question

我正在使用的下拉列表定义如下：

    <div class="dropdown">
     <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">company</button>
     <ul class="dropdown-menu">
      <li><a href="#">google</a></li>
      <li><a href="#">apple</a></li>
      <li><a href="#">microsoft</a></li>
      <li><a href="#">facebook</a></li>
      <li><a href="#">adobe</a></li>
      <li class="divider"></li>
      <li><a href="#">other</a></li>
     </ul>
    </div>

下拉菜单效果很好，唯一的问题是当它被点击时，可供选择的项目列表显示在下拉菜单下方（默认情况下）。我想做的是改变这个位置，使列表显示在下拉列表的中心顶部（也就是下拉按钮被覆盖）

不太确定要怎么做才能得到这个，我在 S/O 上搜索但找不到相关帖子。

任何帮助将不胜感激 - 谢谢！

Answer 1

尝试添加这个 css 属性

.dropdown-menu {
    z-index: 10;
}

Answer 2

您可以使用 top 和 left 属性来做到这一点：

.dropdown-menu {
    top: -4px;
    left: -2px;
}