半透明下拉菜单

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 seetings</li>                <li><i class="iconfont">&#xe66e;</i>User stats</li>                <li><i class="iconfont">&#xe838;</i>Message<span>5</span></li>                <li><i class="iconfont">&#xe8f3;</i>Sign out</li>            </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字体没有放上来。