<div id="settings">
  <a href="#" class="button">
  <span class="txt">Настройки</span>
  <span class="ar">▼</span>
  </a>
  <div class="menu">
  <ul>
  <li><a href="#">Профиль</a></li>
  <li><a href="#">Аватар</a></li>
  <li><a href="#">Подпись</a></li>
  <li><a href="#">Выйти</a></li>
  </ul>
  </div>
</div>

#settings { width:192px; position:absolute; top:50%; left:50%; margin:-30px 0 0 -96px; }

/*---------------------------
Button Default
---------------------------*/

.button {  
  padding:8px 10px;
  border:1px solid #caced9;
  border-top-color:#d3d8e2;
  border-bottom-color:#bfc4cf;
  display:block;
  border-radius:3px;
  -moz-border-radius:3px;
  font-weight:700;
  color:#82889b;
  box-shadow:0 1px 2px rgba(0,0,0,0.15);
  background: #FFFFFF;
  background: -moz-linear-gradient(top, #FFFFFF 0%, #EFF0F3 100%);  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#EFF0F3));
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#EFF0F3',GradientType=0 );  
  background: -o-linear-gradient(top, #FFFFFF 0%,#EFF0F3 100%);
  position:relative;
  cursor:pointer;
}

.button span.txt {
  height:15px;
  padding:0 0 0 22px;
  background:url(../images/cog.png) no-repeat;
  display:block;
  line-height:16px;
  line-height:15px\9; /* Dirty IE Hack */
}

.button span.ar {
  font-size:10px;
  position:absolute;
  top:5px; right:10px;
}

/*---------------------------
Button Effects (hover/active)
---------------------------*/

.button:hover {
  color:#595e6e;
  background: #FFFFFF;
  background: -moz-linear-gradient(top, #FFFFFF 0%, #e7e8ef 100%);  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#e7e8ef));
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#e7e8ef',GradientType=0 );  
  background: -o-linear-gradient(top, #FFFFFF 0%,#e7e8ef 100%);
}

.button:active, .button.active {
  color:#595e6e;
  border-color:#c7cbd3;
  border-top-color:#bcc1cb;
  border-bottom-color:#d1d4db;
  box-shadow:inset 0 1px 2px #d2d4e3;
  background: #FFFFFF;
  background: -moz-linear-gradient(top, #EFF0F3 0%, #FFFFFF 100%);  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EFF0F3), color-stop(100%,#FFFFFF));
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EFF0F3', endColorstr='#FFFFFF',GradientType=0 );  
  background: -o-linear-gradient(top, #EFF0F3 0%,#FFFFFF 100%);
}

.button.active { border-radius:3px 3px 0 0; -moz-border-radius:3px 3px 0 0; border-bottom:0; }

.button:hover span.txt, .button:active span.txt, .button.active span.txt { background-position:0 -15px }

/*---------------------------
Button Menu
---------------------------*/

.menu {
  position:absolute;
  top:32px;
  left:0;
  right:0;
  background:#fff;
  border-radius:0 0 3px 3px;
  -moz-border-radius:0 0 3px 3px;
  border:1px solid #c7cbd3;
  border-top:0;
  border-bottom-color:#b3b7c0;
  box-shadow:0 1px 2px rgba(0,0,0,0.15);
  display:none;
  z-index:40000;
}

.menu ul { list-style:none; padding-top:3px; }

.menu ul li { display:block; zoom:1; }

.menu ul li a {  
  padding:3px 10px;
  font-size:11px;
  border-top:1px solid #e7e7f0;
  border-bottom:1px solid #e7e7f0;
  display:block;
  margin:-1px 0 0 0;
  position:relative;
  text-shadow:0 1px 1px #fff;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FFFFFF',GradientType=0 );
  zoom:1;
}

.menu ul li a span {
  position:absolute;
  bottom:-1px;
  left:0; right:0;
  height:1px;
  display:block;
  background:#d7dbea;
  z-index:20;
  display:none;
  zoom:1;
}

/*---------------------------
Button Menu li hover
---------------------------*/

.menu ul li:hover a {
  border-color:#d7dbea;
  color:#3f586c;
  background: #EBEDF4;
  background: -moz-linear-gradient(top, #EBEDF4 0%, #e5e7ef 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EBEDF4), color-stop(100%,#e5e7ef));  
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EBEDF4', endColorstr='#e5e7ef',GradientType=0 );
  background: -o-linear-gradient(top, #EBEDF4 0%,#e5e7ef 100%);
  box-shadow:inset 0 1px 0 #fff;
}

.menu ul li:hover a span {
  display:block;
}

$(function() {

  var button = $('.button');
  var menu = $('.menu');
   
  $('ul li a', menu).each(function() {
  $(this).append('<span />');
  });
   
  button.toggle(function(e) {
  e.preventDefault();
  menu.css({display: 'block'});
  $('.ar', this).html('▲').css({top: '3px'});
  $(this).addClass('active');
  },function() {
  menu.css({display: 'none'});
  $('.ar', this).html('▼').css({top: '5px'});
  $(this).removeClass('active');
  });
   
});