.main-menu ul li:hover > ul { display: block; }

.main-menu ul li.active > ul { display: block; }

window.onload = init;
function init()
{
    document.getElementById('openSubmenu').onclick   = openSubmenu;
    document.getElementById('closeSubmenu').onclick  = closeSubmenu;
}

function openSubmenu()
{
    document.getElementById('openSubmenu').setAttribute('class','active');
}

function closeSubmenu()
{
    document.getElementById('openSubmenu').removeAttribute('class','active');
}

<div id="closeSubmenu">Close submenu</div>
<nav>
  <div class="main-menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li id="openSubmenu"><a href="#">Dropdown 1</a>
        <ul>
          <li><a href="#">First tier</a></li>
          <li><a href="#">First tier</a></li>
        </ul>
      </li>
      <li><a href="#">Dropdown 2</a>
        <ul>
          <li><a href="#">First tier</a></li>
          <li><a href="#">First tier</a></li>
          <li><a href="#">First tier</a></li>
       </ul>
      </li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</nav>

.main-menu {
  width: 100%;
  left: 0;
}

.main-menu ul {
  position: relative;
  text-align: center;
}

.main-menu ul li { display: inline-block; }

.main-menu li a {
  line-height: 40px;
  padding: 10px 20px;
  text-transform: uppercase;
  text-decoration: none;
  color: #494949;
}

/* Hide dropdowns by default */

.main-menu ul ul {
  width: 100%;
  position: absolute;
  display: none;
  left: 0;
  background-color: #c6c6c6;
}

/* Display Dropdowns on Hover */

.main-menu ul li:hover > ul { display: block; }

/* Display Dropdowns on Click */

.main-menu ul li.active > ul { display: block; }