Trouble with custom boostrap dropdown list

Question

I have a fiddle that doesn't work

I am trying to make a "dropdown" type effect with a list of inputs and a button for some functionality. Basically, there is a table, and then a list of 6 inputs that can filter the results on this table. I have the view complete and working correctly (although I stripped out the functionality for my fiddle).

I understand that I need to use a general layout of

<ul>
   <li>
      <div>
          <input/>
      <div>
   </li>
   <li>
      <div>
          <input/>
      </div>
   </li>
</ul>

Because a <div> must not go directly inside a <ul>

What am I doing wrong?

link to what i want to see after my dropdown is clicked

Answer 1

How about this?

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action</button>
    <div class="dropdown-menu">
        <!-- dropdown content -->
    </div>
</div>

of course, you can set dropdown-menu's width to whatever you desire.