JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <nav role="navigation" class="small--hide">
    <ul class="site-nav">
      <li class="has-desktop-dropdown collection-dropdown">Link 1</li>
      <li>Link 2</li>
      <li class="has-desktop-dropdown journal-dropdown">Link 3</li>
    </ul>
  </nav>

  <div class="desktop-dropdown collection-dropdown-menu small--hide">
    <p>Some content</p>
  </div>
  <div class="desktop-dropdown journal-dropdown-menu small--hide">
    <p>Some content</p>
  </div>

</div>

CSS

.collection-dropdown-menu {
  display: none;
}

.journal-dropdown-menu {
  display: none;
}

.collection-dropdown:hover~.collection-dropdown-menu {
  display: block;
}

.journal-dropdown:hover~.journal-dropdown-menu {
  display: block;
}