JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <div id='headerContent'>
    <div id='LogoHolder'>
    </div>
    <nav id='headerNav'>
      <ul>
        <li id='photoThumbnail'></li>
        <li id='currentUser'>my account
          <ul class="dropDownMenu hideable">
            <li>link1</li>
            <li>link2</li>
          </ul>
        </li>
          <li id='currentUser'>my account
          <ul class="dropDownMenu hideable">
            <li>link1</li>
            <li>link2</li>
          </ul>
        </li>
          <li id='currentUser'>my account
          <ul class="dropDownMenu hideable">
            <li>link1</li>
            <li>link2</li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</header>

CSS

#headerNav.hideable{ display:none; }

#headerNav:hover .hideable{ display:block; }

JavaScript

$('.hideable').hide().removeClass('hideable');

$('#headerNav').click( function(e){
    $(this).find('.dropDownMenu').slideToggle();
    e.stopPropagation();
});

$('html').click( function(e){
    $('.dropDownMenu').slideUp();
});