Is there a condensed way of adding multiple event listeners each with different functions to the same group of elements?
Instead of iterating over the same array 3 times, iterate over it once:
topLevelDesktopNavDropdownItems.forEach((element) =&gt; {
  element.addEventListener('mouseenter', topLevelNavItemMouseOver);
  element.addEventListener('mouseleave', topLevelNavItemMouseOut);
  element.addEventListener('keydown', topLevelNavItemLinkKeyDown);
});

If you think that's too repetitive, you can put the listeners into an object and iterate over the object:
const handlers = {
  mouseenter: topLevelNavItemMouseOver,
  mouseleave: topLevelNavItemMouseOut,
  keydown: topLevelNavItemLinkKeyDown,
};
for (const element of topLevelDesktopNavDropdownItems) {
  for (const [event, handler] of Object.entries(handlers)) {
    element.addEventListener(event, handler);
  }
}

A couple suggestions regarding naming:

The mouseover event is not the same thing as the mouseenter event, Similarly, mouseleave is not exactly the same as mouseout. (One version propagates via bubbling/capturing, the other doesn't. If the elements have children, this makes a big difference.) For precision, consider naming the handlers exactly the same as the event they're listening for.

If you have lots of handlers like this, prefixing them all with topLevelNavItem may get undesirably verbose. To isolate their scope to hopefully make the prefixes less necessary, consider defining them inside a function:


const addDropdownListeners = () =&gt; {
  const mouseOverHandler = (event) =&gt; {
    // ...
  };
  // ...

Or define them inline with the object:
const dropdownHandlers = {
  mouseenter: (event) =&gt; {
    // ...
  }
  // ...