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

Мне нужно, чтобы мои варианты раскрывающегося списка открывались в соответствии с @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>
                        }