<div class="dropdown">  
  <a href="/">Профиль</a>  
  <div>  
  <ul>  
  <li><a href="/">Настройки</a></li>  
  <li><a href="/">Оформление</a></li>  
  <li><a href="/">Оповещения</a></li>  
  </ul>  
  </div>  
  </div>

.dropdown {  
  position: relative;  
  height: 27px;  
  border-width: 1px;  
  border-style: solid;  
  border-color: #272c33 #242930 #22272d;  
  border-radius: 3px;  
  display: inline-block;  
  vertical-align: baseline;  
  zoom: 1;  
  *display: inline;  
  *vertical-align: auto;  
  background-color: #363d47;  
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4a5361), color-stop(100%, #363d47));  
  background-image: -webkit-linear-gradient(top, #4a5361, #363d47);  
  background-image: -moz-linear-gradient(top, #4a5361, #363d47);  
  background-image: -ms-linear-gradient(top, #4a5361, #363d47);  
  background-image: -o-linear-gradient(top, #4a5361, #363d47);  
  background-image: linear-gradient(top, #4a5361, #363d47);  
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);  
  -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);  
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);  
  }  
  .dropdown a {  
  font-size: 12px;  
  text-shadow: 0 1px #000;  
  }  
  .dropdown a:hover {  
  text-decoration: none;  
  }  
  .dropdown > a {  
  float: left;  
  position: relative;  
  height: 27px;  
  line-height: 26px;  
  padding: 0 12px;  
  color: #ecf0f1;  
  border-radius: 2px 0 0 2px;  
  }  
  .dropdown > a:before {  
  content: '';  
  display: inline-block;  
  width: 10px;  
  height: 11px;  
  vertical-align: -2px;  
  margin-right: 10px;  
  background: url("settings.png") 0 0 no-repeat;  
  }  
  .dropdown > a:hover {  
  background: #3f4753;  
  background: rgba(255, 255, 255, 0.04);  
  }  
  .dropdown > a:active {  
  background: #343b44;  
  }  
  .dropdown div {  
  float: left;  
  height: 27px;  
  width: 26px;  
  background: url("toggle.png") 9px 9px no-repeat;  
  border-left: 1px solid #292e36;  
  border-color: rgba(0, 0, 0, 0.4);  
  -webkit-box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08);  
  -moz-box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08);  
  box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08);  
  }  
  .dropdown div:hover {  
  -webkit-box-shadow: inset 1px 0 rgba(255, 255, 255, 0.04), inset 26px 26px rgba(0, 0, 0, 0.1);  
  -moz-box-shadow: inset 1px 0 rgba(255, 255, 255, 0.04), inset 26px 26px rgba(0, 0, 0, 0.1);  
  box-shadow: inset 1px 0 rgba(255, 255, 255, 0.04), inset 26px 26px rgba(0, 0, 0, 0.1);  
  }  
  .dropdown div:hover ul {  
  display: block;  
  }  
  .dropdown ul {  
  display: none;  
  position: absolute;  
  top: 27px;  
  left: -1px;  
  right: -1px;  
  background: #272c33;  
  border: 1px solid #20242a;  
  border-radius: 0 0 3px 3px;  
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);  
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);  
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);  
  }  
  .dropdown ul li {  
  display: block;  
  }  
  .dropdown ul li:last-child a {  
  border-radius: 0 0 3px 3px;  
  }  
  .dropdown ul a {  
  display: block;  
  line-height: 28px;  
  padding: 0 10px 1px;  
  color: #b2b8c4;  
  border-top: 1px solid transparent;  
  }  
  .dropdown ul a:hover {  
  color: #fff;  
  border-color: #78aad5;  
  text-shadow: 0 1px rgba(0, 0, 0, 0.7);  
  background-color: #426ebf;  
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5e9ace), color-stop(100%, #416cb8));  
  background-image: -webkit-linear-gradient(top, #5e9ace, #416cb8);  
  background-image: -moz-linear-gradient(top, #5e9ace, #416cb8);  
  background-image: -ms-linear-gradient(top, #5e9ace, #416cb8);  
  background-image: -o-linear-gradient(top, #5e9ace, #416cb8);  
  background-image: linear-gradient(top, #5e9ace, #416cb8);  
  }