<ul class="parent">
  <li>Home</li>
  <li>About</li>
  <li>
    <span>Work</span>
    <ul>
      <li>アプリ開発</li>
      <li>Design</li>
      <li>Other</li>
    </ul>
   </li>
  <li>Contact</li>
</ul>

body {
  background: #781D42;
  color: #fff;
}

.parent {
  display: flex;
  gap: 0 40px;
  justify-content: center;
  margin-top: 60px;
  
  & > li {
    position: relative;
    padding: 8px 0;
    
    &:hover {
         ul {
          display: block;
        }
      }
    
    span {
      &::after {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg);
        position: relative;
        top: -2px;
        margin-left: 8px;
      }
      
    }
  }
  
  ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
    background: #DE834D;
    
    li {
      padding: 8px 16px;
    }
  }
}


ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  cursor: pointer;
}