how to create dropdown option in bootstrap table <th>

I am trying to make a dropdown in table header like this-

Dropdown Example

              <ul class="dropdown-menu" id="dropEmail" style="position:relative;    z-index: 99999;">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
              </ul>

<table id="example3" class="table table-bordered table-striped" style=" overflow-x: scroll;" >
    <thead>
        <tr>
            <th></th>
            <th class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
            <ul class="dropdown-menu">
            <li><a href="#">Inbox</a></li>
            <li><a href="#">Drafts</a></li>
            <li><a href="#">Sent Items</a></li>
            <li class="divider"></li>
            <li><a href="#">Trash</a></li>
            </ul>
            </th>
        </tr>
    </thead>
    <tbody >
        <tr>
        <td></td>
        <td></td>
        </tr>
    </tbody>
</table>

But in the front end screen the drop down goes to the back of table body. Setting z- index to 9999 and position relative is not working even.

Solution

if you replace your Messages anchor tag with:

<a class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Messages</a>

it will work correctly. aria-haspopup="true" will indicate the element will show a menu or flyout when clicked.

fiddle: http://jsfiddle.net/dtchh/#&togetherjs=EL6OONsxV1