如何使用html引导实现图标下拉

我对bootstrap还不熟悉，但是你能给我一个如何实现这种下拉列表的想法吗？多谢各位

---

为这样的下拉列表加分

<ul class="dropdown-menu">
  <li><a href="#" class="icon"><span
         class="glyphicon glyphicon-user"></span>User Profile</a></li>
  <li><a href="#">Log Out</a></li>
</ul>

.dropdown-menu a.icon {
  position: relative;
  padding-left: 40px;
}
.dropdown-menu a.icon .glyphicon {
  top: 6px;
  left: 10px;
  font-size: 18px;
}

---

关键是GlyphIcon是绝对定位的，即使它们“包含”在标记的内部，默认情况下，定位还是相对于整个菜单的。通过将.icon类添加到包含图标的每个菜单锚定中，它允许您相对于该锚定进行定位，并填充锚定文本，以便图标有适当显示的空间

我检查了你的答案，但看起来每当我选择一个选项时都会提交。我需要的是我可以在提交前自由选择其中一个选项