Javascript 需要将下拉列表附加到类型为“的图标”；按钮“；

我在twitter引导容器上有一个图标。我想点击它，并有一个下拉显示不同的选项，其中包含到其他网站的链接。现在，我可以得到下拉列表，但它会自动显示在页面上，而不需要点击图标，而且每个链接都在彼此的顶部。 基本上，我想要eclipse中任何“按钮”的功能，如“文件、编辑、源代码、导航…”等，点击它，就会出现下拉列表。但我需要把它贴在一个图标上。以下是我尝试失败的地方：

  <a id="myIcon" href="#" class="btn-mini" type="button"><i class="icon-wrench"  title="Help" ></i></a>
    <div id="helpMenu" class="menu">
        <a class="menuItem" href="#">Help</a>
        <a class="menuItem" href="#">Ideas</a>
        <a class="menuItem" href="#">Issues</a>
    </div>

---

我觉得我忽略了一个简单的解决方案。有什么建议吗？

您需要将适当的

数据-

属性添加到标记中，最好将下拉列表中，例如

<div class="dropdown">
  <a role="button" data-toggle="dropdown" href="#"><i class="icon-wrench"  title="Help" ></i></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li role="presentation"><a role="menuItem" href="#">Help</a></li>
    <li role="presentation"><a role="menuItem" href="#">Ideas</a></li>
    <li role="presentation"><a role="menuItem" href="#">Issues</a></li>
  </ul>
</div>

谢谢！这确实有效，但是，下拉列表不会从图标中弹出，而是从容器的左侧（图标在容器的最右侧）找到它出现在错误位置的原因了吗？我对js、jquery、html、css等完全陌生，所以我不确定如何在JSFIDLE中正确显示它，我试过了。所以基本上，这一切都取决于我的CSS？明白了。我必须调整右、上、左和衬垫。再次感谢！