submenu.txt

<nav>
  <ul class="parentMenu">
    <li class="menuItem">
      <span class='menuText'>Who</span>
      <ul class='submenu hidden'>
        <li>Foo 1</li>
        <li>Foo 1</li>
      </ul>
    </li>
    <li class="menuItem">
      <span class='menuText'>Who</span>
      <ul class='submenu hidden'>
        <li>Foo 1</li>
        <li>Foo 1</li>
      </ul>
    </li>
    <li class="menuItem">
      <a href='#' class='menuText'>Who</a>
    </li>
  </ul>
</nav>
<main>
  <h1>
    this is a page title in the main content
  </h1>
</main>

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.parentMenu {
  background-color: red;
  display: flex;  
  li {
    position: relative;
    flex: 1 0 auto;
  }
}

.menuItem {
  display: inline-block;
  margin: 10px 10px 0 10px; 
}

.menuText {
  display: inline-block;
  margin-bottom: 10px;
}

.submenu {
  background-color: white;
  border: 1px solid black;
  display: block;
  position: absolute;
}

.hidden {
  display: none;
}

function onEnter(e) {
	e.stopPropagation();
	$('.submenu').addClass('hidden');
	var submenu = $(e.currentTarget).find('.submenu');
  submenu.removeClass('hidden');
}

function onLeave(e) {
	$(e.currentTarget).find('.submenu').addClass('hidden');
}


$(".menuItem").hover(onEnter, onLeave);
$(".menuItem").on('click', onEnter);
$('body').on('click', function(e) {
  $('.submenu').addClass('hidden');
})