<div class="wrapper">
  <nav class="main__menu4">
    <ul>
      <li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li><li><a href="#">Текст</a></li>
    </ul>
  </nav>
</div>

@import url('https://fonts.googleapis.com/css?family=Roboto')

$m4: #FF4E00

html, body
  width: 100%
  height: 100%
  font-family: 'Roboto', sans-serif
  letter-spacing: 2px
.wrapper
  width: 100%
  height: 100%
  display: flex
  justify-content: center
  align-items: center
  background: linear-gradient(135deg, #e1e1e1 0%, white 50%, #e1e1e1 100%)

a
  color: #000
  text-transform: uppercase
  transition: all .2s ease
  text-decoration: none
  &:hover
    text-decoration: none
    transition: all .2s ease-in

.main__menu4
  ul
    display: flex
    justify-content: center
    overflow: hidden
    li
      display: inline-block
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16)
      +pr
      display: block
      height: 100px
      min-width: 120px
      background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #fafafa 100%)
      transition: all .1s ease
      &:after
        +c
        +pa
        left: 0
        right: -1px
        height: 3px
        background: $m4
        bottom: 0
        transition: all .2s ease
      &:before
        +c
        +arr(20, 5, $m4, t)
        +pa
        left: 50%
        margin-left: -10px
        opacity: 0
        bottom: 0
        transition: all .2s ease
      &:hover
        transform: translate(0, -5px)
        transition: all .2s cubic-bezier(0, 1.35, 0.85, 1.81)
        &:after
          height: 8px
          bottom: -5px
          transition: all .2s cubic-bezier(0, 1.35, 0.85, 1.81)
        &:before
          opacity: 1
          bottom: 2.9px
          transition: all .2s ease
      &:last-child
        a
          &:before
            right: 0
      &:nth-child(1)
        a
          &:before
            content: '\f1b2'
      &:nth-child(2)
        a
          &:before
            content: '\f140'
      &:nth-child(3)
        a
          &:before
            content: '\f0e5'
      &:nth-child(4)
        a
          &:before
            content: '\f0e0'
      &:nth-child(5)
        a
          &:before
            content: '\f013'
      a
        width: 100%
        height: 100%
        display: block
        line-height: 150px
        +pr
        font-size: 12px
        text-align: center
        &:hover
          color: $m4
        &:before
          display: block
          line-height: 0
          +pr
          top: 35px
          text-align: center
          font-size: 40px
          font-family: FontAwesome