Edit in JSFiddle

<div class="nav">
  <ul>
    <li><a href="">Menu 1</a></li>
    <li class="dropdown"><a href="">Menu 2</a>
      <ul>
        <li><a href="">Sub Menu 1</a></li>
        <li><a href="">Sub Menu 2</a></li>
        <li><a href="">Sub Menu 3</a></li>
      </ul>
    </li>
    <li><a href="">Menu 3</a></li>
  </ul>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Verdana, sans-serif;
  font-size: 13px;
}

.nav {
  background: #3c3c3c;
  display: flex;
  justify-content: flex-end;

  &>ul {
    margin: 0;

    &>li {
      display: inline-block;
      position: relative;

      &:hover {
        background: #00aaff;

        &.dropdown {
          li:hover {
            background: #00aaff;
          }
        }
      }

      &.dropdown {
        &>a {
          position: relative;
          padding-right: 40px;

          &:after {
            content: '';
            position: absolute;
            right: 15px;
            width: 6px;
            height: 6px;
            border-width: 0 2px 2px 0;
            border-color: #fff;
            border-style: solid;
            transform: rotate(45deg);
            top: 18px;
          }
        }

        &:hover {
          ul {
            max-height: 150px;
            transition: .2s linear;
          }
        }


        ul {
          max-height: 0;
          overflow: hidden;
        }
      }

      a {
        padding: 15px;
        display: block;
        color: #fff;
        text-decoration: none;

      }

      &>ul {
        margin: 0;
        position: absolute;
        list-style: none;
        width: 180px;
        right: 0;
        background: #484848;

        li {
          margin: 0;

          a {
            margin: 0;
          }
        }
      }
    }
  }
}