как создать выпадающий вариант в начальной загрузке таблице <th>

Question

Я пытаюсь сделать выпадающий список в заголовке таблицы, как this-

Dropdown Пример

   <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> 

Но в конце экране переднего падение вниз идет к задняя часть стола. Установка z-индекса на 9999 и относительное положение не работает.

Answer 1

если вы замените Messages якорный тег:

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

он будет работать правильно. aria-haspopup = "true" будет указывать, что элемент будет отображать меню или всплывающее окно при нажатии.

скрипку: http://jsfiddle.net/dtchh/#&togetherjs=EL6OONsxV1