Проблема с выпадающим списком

$(".dropdown").click(function(e) {
  // use slideDown instead of slideToggle to set it always open.
  $(this).find(".dropdown-menu").slideDown();
  // select all dropdown-menu and remove current dropdown-menu with .not
  // hide other dropdowns.
  $(".dropdown-menu").not($(this).find(".dropdown-menu")).slideUp("fast");
});

$(document).on("click", function(event) {
  var $trigger = $(".dropdown");
  if ($trigger !== event.target && !$trigger.has(event.target).length) {
    $(".dropdown-menu").slideUp("fast");
  }
});

$(".dropdown-menu").slideUp();

.dropdown {
  display: inline-block;
  position: relative;
}

.dropdown-menu {
  text-align: center;
  font-size: 14px;
  background-color: #ffffff;
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td>1</td>
    <td>
      <li class="dropdown">
        <button>open dropdown</button>
        <ul class="dropdown-menu" style="display: none;">
          <li>11</li>
          <li>12</li>
        </ul>
      </li>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>
      <li class="dropdown">
        <button>open dropdown</button>
        <ul class="dropdown-menu" style="display: none;">
          <li>21</li>
          <li>22</li>
        </ul>
      </li>
    </td>
  </tr>
</table>