Выравнивание выпадающего списка под текстом

Question

Мне нужно, чтобы мои выпадающие варианты открывались в соответствии с @item ["name"]. На данный момент он открывает верхнюю левую часть таблицы.

Проект находится в MVC

выпадающий JQuery

<script> 
$(document).ready(function() { 
    $(".dropdown").hide(); $("td.image img").click(function() { 
     $(this).closest('.image').siblings('.dropdown').toggle(); 
    }); 
}); 
</script> 

выпадающий CSS

.dropdown { 
    height:10px; 
    width:40px; 
    background-color:black; 
    color:white; 
    position:relative; 

} 

стол

<table class="diag" style="background: url('.png');border:none"> 
       <tbody> 


        @foreach (var item in Model.project) 
        {        
          @:<tr> 
        <td class="dropdown"> 
              <ul> 
               <li>Option 1</li> 
               <li>Option 2</li> 
              </ul> 


             </td> 

         <td class="change"><div class="arrow-@item["change"]"></div></td> 
         <td class="image"> 
          <img src="@item["image"]" />        
         </td> 
         <td class="name">@item["name"]</td> 

         @:</tr> 
         } 

Answer 1

Wrap эти два элемента в container

и обеспечивает float left для элементов контейнера, они будут автоматически попадают под собой

образец скрипки http://jsfiddle.net/y69XP/1/