Drop-down

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<nav>
  <ul>
    <li>
      <a href="#">link 1</a>
      <ul>
        <li>
          <a href="#">link item 1</a>
          <ul>
            <li><a href="#">link item item 1</a></li>
            <li><a href="#">link item item 2</a></li>
            <li><a href="#">link item item 3</a></li>
          </ul>
        </li>
        <li><a href="#">link item 2</a></li>
        <li><a href="#">link item 3</a></li>
        <li><a href="#">link item 4</a></li>
        <li><a href="#">link item 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">link 2</a>
      <ul>
        <li><a href="#">link item 1</a></li>
        <li><a href="#">link item 2</a></li>
        <li><a href="#">link item 3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">link 3</a>
      <ul>
        <li><a href="#">link item 1</a></li>
        <li><a href="#">link item 2</a></li>
        <li><a href="#">link item 3</a></li>
        <li><a href="#">link item 4</a></li>
      </ul>
    </li>
  </ul>
</nav>

SCSS

/* custom */
nav ul {
  padding: 0;
  margin: 0;
  
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  
  li {
    list-style-type: none;
    white-space: nowrap;
    position: relative;
    margin: 0 1px;
    float: left;
    padding: 0;
    
    a {
      background: green;
      display: block;
      padding: 15px;
    }
    
    ul {
      transition: max-height 0.25s linear;
      position: absolute;
      overflow: hidden;
      max-height: 0;
      top: 100%;
      left: 0;
      
      li {
        margin: 0;
        float: none;
        
        ul {
          max-height: auto;
          position: static;
          display: block;
        }
      }
    }
    
   &.expanded ul {
      display: block;
      max-height: 500px;
    }
  }
}

JavaScript

$('nav > ul').each(function(){
	let items = $('li', this);
  
  $('html, body').click(function(){
  	items.removeClass('expanded');
  });
 
  $('li', this).click(function(e){
  	let item = $(this);
  	if (item.hasClass('expanded')) {
    	item.removeClass('expanded');
    } else {
    	items.removeClass('expanded');
    	item.addClass('expanded');
    }
    e.stopPropagation();
  });
});