半透明下拉菜单

1，点击 cart Fredr….菜单title时，
2，弹出菜单菜单，
3，菜单弹出有动画效果，
4，菜单title 右侧箭头默认向上，点击菜单展开时，箭头向下，有转动动画，
5，弹出菜单，鼠标移动时，每栏菜单有颜色变化，
6，整个菜单全部半透明。

HTML

<div class="wrap">
        <div class="nav">
            <div class="carl"><i class="iconfont">&＃xe608;i>Carl Fredrlcksen<i class="iconfont up">&＃xe619;i>div>
            <ul class="sub_nav">
                <li><i class="iconfont">&＃xe60e;i>Account seetingsli>
                <li><i class="iconfont">&＃xe66e;i>User statsli>
                <li><i class="iconfont">&＃xe838;i>Message<span>5span>li>
                <li><i class="iconfont">&＃xe8f3;i>Sign outli>
            ul>
        div>
    div>
    <script src="js/jquery2.0.0.min.js">script>
    <script src="js/script.js">script>

CSS

@charset"utf-8";
*{
    margin: 0;
    padding: 0;
}
body{
 background: url(../images/5a.jpg) no-repeat center top;
}
ul{
 list-style: none;
}
.wrap{
 position: relative;
}
.nav{
 width: 220px;
 text-align: center;
 margin: 200px auto;
 color: #464c48; 
 font-size: 14px;
 font-family: "微软雅黑";
/* font-weight:bold; */
}
.carl,.sub_nav li{
 padding: 10px;
 text-align: left;
 border: 1px solid;
 border-color: #cdd6d1 #b3b5aa #485951;
 background-color: rgba(166,175,172,0.5);
 box-shadow: 0 0 5px #816b54;
 cursor: pointer;
}
.carl{
 border-radius: 5px;
}
.sub_nav li:first-child{
 border-radius: 5px 5px 0 0;
}
.sub_nav li:last-child{
 border-radius:0 0 5px 5px;
 border-bottom-color: #cdd6d1;
}
.sub_nav li:hover{
 background-color: rgba(216,221,224,0.5);
}
.sub_nav{
 margin-top: 15px;
 display: none;
 position: relative;
}
.sub_nav span{
 width: 30px;
 display: inline-block;
 background-color: #e0e1dc;
 float: right;
 text-align: center;
 border: 1px solid;
 border-radius: 30px;
 border-color: #62635d #96968c #b0aa9c;
}
.sub_nav:before{
 content: "";
 display: block;
 position: absolute;
 top: -17px;
 right: 15px;
 border: 8px solid transparent;
 border-bottom-color: rgba(186,190,184,0.6); 
}
.iconfont{
 margin-right: 10px;
}
.up{
 float: right;
 margin-right: 3px;
 margin-top: 3px;
}
.down{
 transform: rotate(180deg);
 -ms-transform: rotate(180deg); /* IE 9 */
 -webkit-transform: rotate(180deg); /* Safari and Chrome */
 margin-top: 0px;
}

@font-face {font-family: 'iconfont';
 src: url('../iconfont/iconfont.eot'); /* IE9*/
 src: url('../iconfont/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('../iconfont/iconfont.woff') format('woff'), /* chrome、firefox */
 url('../iconfont/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
 url('../iconfont/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{
 font-family:"iconfont" !important;
 font-size:16px;font-style:normal;
 -webkit-font-smoothing: antialiased;
 -webkit-text-stroke-width: 0.2px;
 -moz-osx-font-smoothing: grayscale;}

JS

;$(function () {
    var _carl=$(".carl");
    _carl.click(function() {
        var _sub_nav=$(".sub_nav");
        var _up=$(".up");
        _sub_nav.fadeToggle();
        _up.toggleClass("down");
    });
});

图片和icon字体没有放上来。