Instead of using anchors or buttons in a drop down menu, I want to have a form for each item. The form contains some hidden fields and a submit button. When I put the form in each `<li>` of my mark up, the UI was messed up. Does Bootstrap support this natively? If not, I'm going to re-code my application to work with links.

**Update 1: screen shot**

![enter image description here](https://i.stack.imgur.com/337Ck.jpg)

**Update 2: mark up**

```
  <div class="btn-group open">
    <button class="btn">Action</button>

    <ul class="dropdown-menu">
      <li>
        <form action="#" method="post">
          <fieldset>
            <input type="submit" value="Favorite"/>
          </fieldset>
        </form>
      </li>

      <li><a href="#">Message</a></li>

      <li>
        <form action="#" method="post">
          <fieldset>
            <input type="submit" value="Smile"/>
          </fieldset>
        </form>
      </li>

      <li>
        <form action="#" method="post">
          <fieldset>
            <input type="submit" value="Block"/>
          </fieldset>
        </form>
      </li>

      <li>
        <form action="#" method="post">
          <fieldset>
            <input type="submit" value="Friend"/>
          </fieldset>
        </form>
      </li>

      <li>
        <form action="#" method="post">
          <fieldset>
            <input type="submit" value="Exclude From Future Search Results"/>
          </fieldset>
        </form>
      </li>
    </ul>
  </div>

```

Update 3: icons

I want the submit buttons to have an icon. Not sure what's the best way to do that, but this is my solution:

```
<label for="foo">
   <i class="icon-ok></i> Favorite
</label>
<input id="foo" style="display:none;" type="submit" value="Favorite"/>

```

The submit form is hidden, the label is shown with icon, and when user clicks on the label, it works. No JS required.