Two styles of dropdown menus

Using translateX(-200vw) and opacity:0;visibility:hidden;

by Jake

HTML

<nav id="one">
  <ul>
    <li>
      <a href="#">this</a>
      <ul class="sub-menu">
        <li><a href="#">item 1</a></li>
        <li><a href="#">item 2</a></li>
        <li><a href="#">item 3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">other</a>
    </li>
    <li>
      <a href="#">thing</a>
      <ul class="sub-menu">
        <li><a href="#">item 5</a>
        <ul>
        
          <li><a href="#">hello</a></li>
        </ul></li>
      </ul>
    </li>
  </ul>
</nav>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Salutantibus vitae elit libero, a pharetra augue. Quam diu etiam furor iste tuus nos eludet? Hi omnes lingua, institutis, legibus inter se differunt.
Me non paenitet nullum festiviorem excogitasse ad hoc. A communi observantia non est recedendum. At nos hinc posthac, sitientis piros Afros. Contra legem facit qui id facit quod lex prohibet.
<hr>
<nav id="two">
  <ul>
    <li>
      <a href="#">this</a>
      <ul class="sub-menu">
        <li><a href="#">item 1</a></li>
        <li><a href="#">item 2</a></li>
        <li><a href="#">item 3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">other</a>
    </li>
    <li>
      <a href="#">thing</a>
      <ul class="sub-menu">
        <li><a href="#">item 5</a>
        <ul>
        
          <li><a href="#">hello</a></li>
        </ul></li>
      </ul>
    </li>
  </ul>
</nav>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Salutantibus vitae elit libero, a pharetra augue. Quam diu etiam furor iste tuus nos eludet? Hi omnes lingua, institutis, legibus inter se differunt.
Me non paenitet nullum festiviorem excogitasse ad hoc. A communi observantia non est recedendum. At nos hinc posthac, sitientis piros Afros. Contra legem facit qui id facit quod lex prohibet.

SCSS

nav#one {
  position: relative;
  ul {
    display: flex;
    list-style: none;
    
    a {
      display: block;
      padding: .5em;
      background: hsl(0,0%,97%);
      
      &:hover {
        background: yellow;
      }
    }
    
  }

  .sub-menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    position: absolute;
    display: flex;
    flex-direction: column;

    padding: .5em;
  }
  li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
  }
  
}

nav#two {
  position: relative;
  ul {
    display: flex;
    list-style: none;
    
    a {
      display: block;
      padding: .5em;
      background: hsl(0,0%,97%);
      
      &:hover {
        background: yellow;
      }
    }
    
  }

  .sub-menu {
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    position: absolute;
    display: flex;
    flex-direction: column;
    transform: translateX( -200vw );

    padding: .5em;
  }
  li:hover .sub-menu {
    transform: translateX( 0 );
  }
  
}