JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapp">
  <ul class="list">
    <li class="list__item">Main</li>
    <li class="list__item">
      Goods
      <ul class="drop-list">
        <li class="drop-list__item">Item1</li>
        <li class="drop-list__item">Item2</li>
        <li class="drop-list__item">Item3</li>
      </ul>
    </li>
    <li class="list__item">Contacts</li>
    <li class="list__item">About Us</li>
  </ul>
</div>

SCSS

* {
  box-sizing:border-box;
}

.wrapp {
  display: block;
  width: 450px;
  height: 450px;
  margin: 0 auto;
  background: #cecece;
  position: relative;
  overflow: hidden;
  font: 16px Arial, sans-serif;
}

.list {
  display: block;
  width: 200px;
  background: #c1a2a2;
}

.list__item {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px 0;
  border-left: 6px solid transparent; 
  text-align: center;
  &:hover {
     font-weight: bold;
     border-left: 6px solid #000; 
     background: #fff;
     .drop-list {left:100%};
  }
}

.drop-list {
    display: block;
    width: 200px;
    background: #e1cca2;
    position: absolute;
    left: -1000px;
    top: 0;
    
}

.drop-list__item {
  display: block; 
  padding: 10px 0;
  border-right: 6px solid transparent; 
  &:hover {
      border-right: 6px solid #000; 
      font-weight: bold;
      background: #fff;
  }
}