Overflow menu hyperscript select

[liketoeatcheese]

Hi team,

I'm following hypermedia.systems book and wondering how I would implement the VanillaJS version of the overflow menu in hyperscript.
Here's the book's version with VanillaJS:

  <td>
    <div data-overflow-menu>
      <button
        type="button"
        aria-haspopup="menu"
        aria-controls="contact-menu-{{ contact.contact_id }}"
      >
        Options
      </button>
      <div role="menu" hidden id="contact-menu-{{ contact.contact_id }}">
        <a role="menuitem" href="/contacts/{{ contact.contact_id }}/edit">Edit</a>
        <a role="menuitem" href="/contacts/{{ contact.contact_id }}">View</a>
        <a
          role="menuitem"
          href="#"
          hx-delete="/contacts/{{ contact.contact_id }}"
          hx-confirm="Are you sure you want to delete this contact?"
          hx-swap="outerHTML swap:1s"
          hx-target="closest tr"
          >Delete</a
        >
      </div>
    </div>
  </td>

I have tried:

  <td>
    <div
      id="over-flow-button"
      _="on click toggle the *display of the next <ul/>"
    >
      Options
      <ul style="display: none">
        <a href="/contacts/{{ contact.contact_id }}/edit">Edit</a>
        <a href="/contacts/{{ contact.contact_id }}">View</a>
        <a
          href="#"
          hx-delete="/contacts/{{ contact.contact_id }}"
          hx-confirm="Are you sure you want to delete these contacts?"
          hx-target="closest tr"
          hx-swap="outerHTML swap:1s"
          >Delete</a
        >
      </ul>
    </div>
  </td>

But this will choose the next instead of the current .

I also tried "on click toggle the *display of my <ul/>", but getting some weird error:

 Unexpected value: >

on click toggle the *display of my <ul/>
                                       ^^

Any help would be appreciated!