<style>
.menu{
background:-webkit-linear-gradient(top,#5483B2,#165696);
background:-moz-linear-gradient(top,#5483B2,#165696);
background:-o-linear-gradient(top,#5483B2,#165696);
background:linear-gradient(top,#5483B2,#165696);
height:42px;
width:100%;
border-bottom: 1px solid #14467A;
border-top:1px solid #366898;
}
.li{
padding: 16px 15px 4px;
color:white;
display:inline-block;
font-family:'Arial';
font-size:10pt;
}
.li:hover{
background:-webkit-linear-gradient(top,#406C9B,#144C87);
background:-moz-linear-gradient(top,#406C9B,#144C87);
background:-o-linear-gradient(top,#406C9B,#144C87);
background:linear-gradient(top,#406C9B,#144C87);
cursor:pointer;
}
.li:active{
background:-webkit-linear-gradient(top,#255C95,#255C95);
background:-moz-linear-gradient(top,#255C95,#255C95);
background:-o-linear-gradient(top,#255C95,#255C95);
background:linear-gradient(top,#255C95,#255C95);
}
.lid{
padding: 16px 15px 4px;
color:white;
display:inline-block;
font-family:'Arial';
font-size:10pt;
}
.lid:hover{
background:-webkit-linear-gradient(top,#406C9B,#144C87);
background:-moz-linear-gradient(top,#406C9B,#144C87);
background:-o-linear-gradient(top,#406C9B,#144C87);
background:linear-gradient(top,#406C9B,#144C87);
cursor:pointer;
}
.lid:active{
background:-webkit-linear-gradient(top,#255C95,#255C95);
background:-moz-linear-gradient(top,#255C95,#255C95);
background:-o-linear-gradient(top,#255C95,#255C95);
background:linear-gradient(top,#255C95,#255C95);
}
.icons{
background:url("icon.png");
width:18px;
height:18px;
margin-top:-12px;
position:relative;
}
.drop{
display:none;
width:100px;
height:150px;
position:absolute;
opacity:0;
border:1px solid #9FC1EB;
background:white;
margin-top:8px;
margin-left:-15px;
border-radius:2px;
-webkit-box-shadow:1px 1px 2px black;
}
.dropli{
padding:3px;
width:94px;
color:#0857A6;
}
.dropli:hover{
background:#9FC1EB;
}
</style>
<div class="menu"><a href="#"><div class="li"><div class="icons" style="margin-left:18px;"></div>Написать</div></a><a href="#"><div class="li"><div class="icons" style="background-position:0px 31px;margin-left:15px;"></div>Письма</div></a><a href="#"><div class="li"><div class="icons" style="background-position:0px -80px;margin-left:15px;"></div>Адреса</div></a><a href="#"><div class="li"><div class="icons" style="background-position:0px 72px;margin-left:12px;"></div>Файлы</div></a><a href="#"><div class="lid" onclick="start()"><div class="icons" style="background-position:0px 117px;margin-left:5px;"></div>Ещё<div class="drop"><div class="dropli">123</div><div class="dropli">1234</div></div></div></a></div>
<script>
function start(){
$(".drop").css("display","block");
$(".drop").animate({opacity:1},300);
$(".lid").attr("onclick","start1()");
$(".lid").css("background","-webkit-linear-gradient(top,#255C95,#255C95)");
};
function start1(){
$(".drop").fadeOut(300);
$(".drop").animate({opacity:0},300);
$(".lid").attr("onclick","start()");
$(".lid").css("background","-webkit-linear-gradient(top,#5483B2,#165696)");
};
</script>
