<nav>
  <ul>
  <li class="drop">
  <div class="user-avatar">
  <img src="ste.png" />
  </div>
  <a href="#">Stefano</a>
  <span aria-hidden="true" class="icon-reorder orange-txt"></span>
  <div class="triangle"></div>
  <div class="dropdownContain">
  <div class="dropOut">
  <ul>
  <li><span aria-hidden="true" class="icon-envelope-alt"></span>Сообщение</li>
  <li><span aria-hidden="true" class="icon-user"></span>Мой профиль</li>
  <li><span aria-hidden="true" class="icon-cog"></span> Настройки</li>
  <li><span aria-hidden="true" class="icon-off"></span> Выход</li>
  </ul>
  </div>
  </div>
  </li>
  </ul>
</nav>

nav {
  width:13em;
  margin:2em auto;
  background:#f6f6f6;
  @include border-radius(.4em, .4em);
  box-shadow: 0 0 4px rgba(0,0,0,.15);
}
.user-avatar img{
  @include border-radius(4em,4em);
  float:left;
  margin-left:.618em;
  margin-top:.2em
}
.icon-reorder{
  padding:.8em 1em;
  color:white;
  border-radius:0 .4em .4em 0;
  float:right
}
.drop {
  position: relative;
  font-size: 1em;
  cursor: pointer;
a {
  font-weight: 400;
  line-height: 2.5em;
  padding: 0 1em;
  color: lighten(black,30%);
  text-decoration:none;
  }
}
.triangle {
  width: 0;
  height: 0;
  position: absolute;
  border-left: .4em solid transparent;
  border-right: .4em solid transparent;
  border-top: .4em solid #FFB135;
  left: 89.5%;
  margin-left: -.4em;
  opacity:0
}
.dropdownContain {
  width: 13em;
  position: absolute;
  z-index: 2;
  left: 50%;
  margin-left: -6.5em; /* half of width */
  top: -300px;
}
.dropOut {
  width: 13em;
  background:#f6f6f6;
  float: left;
  position: relative;
  margin-top: 0;
  opacity: 0;
  @include border-radius(.4em, .4em);
  box-shadow: 0 0 4px rgba(0,0,0,.15);
  border:1px solid rgba(white, .75) ;
  overflow:hidden;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
ul {
  padding: .3em 0;
  margin:0
  }
}
.dropOut li {
  text-align: left;
  width: 100%;
  padding: .6em 0 ;
  color: darken(#fff, 50%);
  border-left:3px solid #f7f7f7;
-webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
  span{
  color: darken(#fff, 20%);
  margin: 0 1.5em 0 .8em;
}
  &:hover{
  border-color: lighten(#FFB135,10%);
  color: darken(#fff, 70%);
  background: darken(#f7f7f7,4%);
  span{
  color:darken(#fff, 50%)
  }
  }
}
ul li:hover .triangle { opacity: 1 }
ul li:hover .dropdownContain { top: 30px; }
ul li:hover .dropOut { opacity: 1; margin-top:20px;}
.orange-txt {
  background-color: #ffc15e;
  background-image: -o-linear-gradient(bottom, #ffb135 0%, #ffc15e 100%);
  background-image: -moz-linear-gradient(bottom, #ffb135 0%, #ffc15e 100%);
  background-image: -webkit-linear-gradient(bottom, #ffb135 0%, #ffc15e 100%);
  background-image: -ms-linear-gradient(bottom, #ffb135 0%, #ffc15e 100%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0%, #ffb135), color-stop(100%, #ffc15e));
  background-image: linear, bottom, #ffb135 0%, #ffc15e 100%;
&:hover {
  background: #ffb135;
}
}