JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a>
      <ul>
      <div style="float:left;">
      <li style="zoom:1; *display: inline; _height: 30px;"><a href="#">Project 1</a></li>
        <li style="zoom:1; *display: inline; _height: 30px;"><a href="#">Project 1</a></li>
        </div>
        <div style="float:right;">
      <li style="zoom:1; *display: inline; _height: 30px;"><a href="#">Project 1</a></li>
        <li style="zoom:1; *display: inline; _height: 30px;"><a href="#">Project 1</a></li>
        </div>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

SCSS

#main-nav{
  ul{
    margin: 0;
    padding: 0;
    border-right: 1px solid black;
    width: 250px;
    list-style-type: none;
    li{
      position: relative;
      &:hover{
        &:before{
              content: "";
              top: 0;
              bottom: 0;
              right: 0;
              border-top: 5px solid transparent;
              border-right: 5px solid #999;
              border-bottom: 5px solid transparent;
              border-left: 5px solid transparent;
              position: absolute;
              height: 0px;
              width: 0px;
              margin: auto;
        }
        > ul{
          display: block;
          /*&:before { // I don't like this part but it will make child ul's look closer to your design.
              content: "";
              position: absolute;
              right: 0;
              top: -65px;
              bottom: -35px;
              width: 1px;
              background-color: #ccc;
          }*/
        }
      }//:hover
      
      a{
        padding: 7px 10px;
        display: block;
        &:hover{
          color: red;
        }
      }// a
      
      > ul{
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        border-right: 1px solid #ccc;
      }
    }// li
  }// ul
}