将缩略图图像添加到Bootstrap下拉菜单

Question

我正在尝试使用Bootstrap 3将用户的个人资料图片添加到下拉菜单中。

以下是我目前代码中的下拉菜单的代码段：

<ul class="nav navbar-right top-nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="usernameHeaderField"><i class="fa fa-user"></i>Administrator <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <img class="thumbnail" style="height:100px; float-left; margin:10px" src="default.jpg">

      <li>
        <a href="profile.php"><i class="fa fa-fw fa-user"></i> Profile</a>
      </li>
      <li>
        <a href="sendEmail.php"><i class="fa fa-fw fa-envelope-o"></i>Send email report</a>
      </li>
      <li>
        <a href="settings.php"><i class="fa fa-fw fa-gear"></i> Settings</a>
      </li>
      <li class="divider"></li>
      <li>
        <a href="logout.php"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
      </li>
    </ul>
  </li>
</ul>

目前的情况如下：

我已经尝试将无序列表放在div中并给div下拉类，但这打破了此菜单中链接的漂亮风格。此外，还需要更多格式化才能移动图片旁边的列表。

有没有办法创建一个下拉菜单，其中图片浮动到列表项的左侧？

提前感谢您对此问题的任何帮助。