<main>
  <ul>
    <li>
      <a href="#">submenu#1</a>
      <div>
        <ol>
          <li><a href="#">submenu#1-1</a></li>
          <li><a href="#">submenu#1-2</a></li>
          <li><a href="#">submenu#1-3</a></li>
        </ol>
      </div>
    </li>
    <li>
      <a href="#">submenu#2</a>
      <div>
        <ol>
          <li><a href="#">submenu#2-1</a></li>
          <li><a href="#">submenu#2-2</a></li>
        </ol>
      </div>
    </li>
    <li>
      <a href="#">submenu#3</a>
      <div>
        <ol>
          <li><a href="#">submenu#3-1</a></li>
        </ol>
      </div>
    </li>
  </ul>
</main>
body {
  margin: 0;
  font-family: 'Helvetica Neue', sans-serif;
}
main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  > li {
    > a {
      position: relative;
      display: block;
      background-color: #2B4570;
      color: #fff;
      padding: 16px 16px;
      text-decoration: none;
      transition: background-color 200ms ease-out;
    }
    > div {
      position: relative;
      display: none;
    }
    &:nth-child(n+2) {
      > a {
        border-left: 1px solid #fff;
      }
    }
    &:hover {
      > a {
        background-color: rgba(#2B4570,.75);
      }
      > div {
        display: block;
        > ol {
          animation-name: dropdown;
          animation-duration: 500ms;
          animation-direction: normal;
          will-change: transform;
        }
      }
    }
  }
}

ol {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
  min-width: 150px;
  background: #EB8258;
  box-sizing: border-box;
  border-radius: 2px;
  box-shadow: 0 2px 10px hsla(0,0%,0%,.25);
  > li {
    > a {
      display: block;
      padding: 10px 16px;
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      white-space: nowrap;
      transition: background-color 200ms ease-out;
      &:hover {
        background-color: hsla(0,0%,0%,.1);
      }
    }
    &:nth-child(n+2) {
      border-top: 1px solid hsla(0,0%,100%,.25);
    }
  }
}

@keyframes dropdown {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  75% {
    opacity: 1;
  }
  to {
    transform: translateY(0);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.