<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li class="sub-menu"><a href="https://www.google.com">About</a>
      
      <ul>
          <li><a href="#">History</a></li>
          <li><a href="#">Bio</a></li>
      </ul>
    
    </li>    
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.menu{
  font-family:sans-serif;
  ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    li{
      width:25%; // set per menu
      @media (max-width:40em){
        width:100%;
      }
      > ul{
        display:flex;
        visibility:hidden;
        position:absolute;
        left:-99999;
        flex-direction:column;
        li{
          width:100%;
        }
      }
      &:hover{
        a{
          background:lightBlue;
          color:blue;
          &:hover{
            color:green;
          }
        }
        > ul{
          visibility:visible;
          position:relative;
          left:0;
        }
      }
    }
  } 
 
  a{
    text-transform:uppercase;
    display:block;
    background:blue;
    padding:15px;
    color:white;
    text-decoration:none;
    text-align:center;
    &:hover{
      background:lightBlue;
      color:blue;
    }
  }
  
  .sub-menu li > a {
    background:lightBlue;
    color:blue;
  }
  
  .sub-menu > a:after{
    content:"+";
    padding-left:5px     
  }
}

$(".sub-menu a").one("click", false);