Javascript ul导航ul li a：悬停{ 颜色：#687074； 字体大小：正常； } ul.李莉{ 填充：0； } ul.navigation ul.sub-menu>li>a{ 填充：8px 24px！重要； 保证金：0； 文本对齐：左对齐； 线高：15px！重

ul导航ul li a：悬停{ 颜色：#687074； 字体大小：正常； } ul.李莉{ 填充：0； } ul.navigation ul.sub-menu>li>a{ 填充：8px 24px！重要； 保证金：0； 文本对齐：左对齐； 线高：15px！重要； } section.middle.tab-bar-section.row.outer-row{ 最大宽度：80em！重要； 保证金：8px自动20px自动！重要； } ul.navigation>li.has-children>a：以前{ 内容：“\f107”； 位置：绝对位置； 右：0px； 颜色：#6e7583； 填充：0； 保证金：0； 字体大小：12px； 字体系列：Fontsome； } ul.navigation>li.has-children{ 保证金权利：4px； } ul.navigation>li>ul{ 顶部：50px； /*填充顶部：40px*/ } ul.navigation>lia{ 线高：20px！重要； 填充底部：20px！重要； } ul.p{ 保证金：0； 填充：0； } .导航包装器{ 浮动：无； /*显示：块*/ 文本对齐：居中； /*填充：0*/ /*保证金：0*/ /*高度：自动*/ /*宽度：自动*/ /*垂直对齐：顶部*/ /*位置：绝对位置*/ /*顶部：26px*/ /*右：0*/ /*垂直对齐：中间！重要*/ } 导航{ z指数：1； 显示：内联块； 宽度：自动； 保证金：0； 填充：0； 位置：静态； 排名：0； 左：0； /*行高：继承*/ /*浮动：无*/ 垂直对齐：顶部； } /*全球的*/ *, *：之后， *：之前{ -webkit框大小：边框框； -moz框大小：边框框； 框大小：边框框； 填充：0； 保证金：0； } ：：选择{ 背景：透明； } ：-moz选择{ 背景：透明； } .包装器演示{ /*利润率：60px0*/ *缩放：1； /*字体大小：400*/ /*浮动：对*/ } .包装器演示：之后{ 明确：两者皆有； 内容：“； 显示：表格； } .wrapper-dropdown-3{ /*大小和位置*/ 位置：相对位置； 宽度：200px； 保证金：0自动； 填充：10px； /*风格*/ 背景：#fff； /*边界半径：7px*/ 边框：1px实心rgba（0,0,0,0.15）； 盒影：0 1px 1px rgba（50,50,50,0.1）； 光标：指针； 大纲：无； /*字体设置*/ 字体大小：粗体； 颜色：#6e7583； } .wrapper-dropdown-3：之后{ 内容：“； 宽度：0； 身高：0； 位置：绝对位置； 右：15px； 最高：50%； 利润上限：-3px； 边框宽度：6px 6px 0 6px； 边框样式：实心； 边框颜色：#6e7583透明； } .wrapper-dropdown-3.下拉列表{ /*大小和位置*/ 位置：绝对位置； 最高：140%； 左：0； 右：0； /*风格*/ 背景：白色； 边界半径：继承； 边框：1px实心rgba（0,0,0,0.17）； 长方体阴影：0.5pxRGBA（0,0,0,0.1）； 字体大小：正常； -webkit过渡：所有0.5s易用性； -moz过渡：所有0.5s的易用性； -ms过渡：所有0.5秒的轻松过渡； -o型过渡：所有0.5s易于进入； 过渡：所有0.5s的轻松过渡； 列表样式：无； /*隐藏*/ 不透明度：0； 指针事件：无； } .wrapper-dropdown-3.dropdown:after{ 内容：“； 宽度：0； 身高：0； 位置：绝对位置； 底部：100%； 右：15px； 边框宽度：0 6px 6px 6px； 边框样式：实心； 边框颜色：#fff透明； } .wrapper-dropdown-3.dropdown:before{ 内容：“； 宽度：0； 身高：0； 位置：绝对位置； 底部：100%； 右：13px； 边框宽度：0 8px 8px 8px； 边框样式：实心； 边框颜色：rgba（0,0,0,0.1）透明； } .wrapper-dropdown-3.dropdown-li a{ 显示：块； 填充：10px； 文字装饰：无； 颜色：#6e7583； 边框底部：1px实心#e6e8ea； 框阴影：插入0 1px 0 rgba（255、255、255、1）； -webkit过渡：所有0.3版本都可以轻松过渡； -moz转换：所有0.3秒都会变慢； -ms转换：所有0.3秒都会变慢； -o型过渡：所有0.3秒都会变缓； 过渡：所有0.3秒放松； } .wrapper-dropdown-3.dropdown li i{ 浮动：对； 颜色：继承； 字体大小：继承； } .wrapper-dropdown-3.dropdown li：第一种类型{ 边界半径：7px 7px 0； } .wrapper-dropdown-3.dropdown li:最后一个a型{ 边界：无； 边界半径：0 0 7px 7px； } /*悬停状态*/ 。wrapper-dropdown-3。dropdown李：将鼠标悬停在a上{ 背景：#f3f8； } /*活动状态*/ .wrapper-dropdown-3.active.dropdown{ 不透明度：1； 指针事件：自动； z指数：9999； } /*没有CSS3支持*/ .无不透明度。包装-下拉-3.下拉， .no pointerevents.wrapper-dropdown-3.dropdown{ 显示：无； 不透明度：1； /*如果不透明度支持但不支持指针事件*/ 指针事件：自动； /*如果指针事件支持但不支持指针事件*/ } .no opacity.wrapper-dropdown-3.active.dropdown， .no pointerevents.wrapper-dropdown-3.active.dropdown{ 显示：块； } 导航{ 身高：100%； 填充顶部：0； 填充底部：0； 空白：nowrap； z指数：1； 位置：相对位置； 边际上限：0； 页边距底部：0； 左边距：323px； 背景重复：重复； 背景位置：中心； 颜色：#000000； 字体大小：16px； 字体大小：粗体； 左侧填充：20px； 右边填充：20px； } ul.navigation， 导航{ 列表样式：无； } 导航{ z指数：1000； 宽度：自动； 保证金：0； 填充：10px 0 10px 0； 位置：绝对位置； 颜色：#ffffff； 字体大小：正常； 背景色：#34495e； } ul.navigation>li>ul{ 右：0； } ul.navigation>li.有孩子：之后{ 内容：''； 显示：块； 位置：绝对位置； 身高：0； 宽度：0； 边框：8px实心透明； 底部：0； 左：50%； 左边距：-8px； 边框底色：#34495e； } ul.导航ul， ul.navigation>li.有孩子：之后{ -webkit转换：所有100毫秒的ease-i

$(document).ready(function(){
    if (localStorage.getItem('role')) {
        //what do I do?;
    }
});
function DropDown(el) {
        this.dd = el;
        this.placeholder = this.dd.children('span');
        this.opts = this.dd.find('ul.dropdown > li');
        this.val = '';
        this.index = -1;
        this.initEvents();
    }
    DropDown.prototype = {
        initEvents : function() {
            var obj = this;

            obj.dd.on('click', function(event){
                $(this).toggleClass('active');
                return false;
            });

            obj.opts.on('click',function(){
                var opt = $(this);
                obj.val = opt.text();
                obj.index = opt.index();
                obj.placeholder.text(obj.val);

                if (obj.val === 'Workflow Designer') {
                    obj.val = 'studio';
                }
                obj.val = obj.val.toLowerCase();

                $('.agent, .supervisor, .manager, .studio').not( '.'+obj.val ).css('display','none');
                $('.agent, .supervisor, .manager, .studio').filter( '.'+obj.val ).css('display','block');
                localStorage.setItem('role', obj.val);
            });
        },
        getValue : function() {
            return this.val;
        },
        getIndex : function() {
            return this.index;
        }
    }
    $(function() {

        var dd = new DropDown( $('#dd') );

        $(document).click(function() {
            // all dropdowns
            $('.wrapper-dropdown-3').removeClass('active');
        });
    });
</script>

<div class="wrapper-demo">
                <div id="dd" class="wrapper-dropdown-3" tabindex="1">
                    <span>I am a(n): </span>
                    <ul class="dropdown">
                        <li><a href="#"><i class="fa fa-user fa-fw"></i>Agent</a></li>
                        <li><a href="#"><i class="fa fa-user-plus fa-fw"></i>Supervisor</a></li>
                        <li><a href="#"><i class="fa fa-users fa-fw"></i>Manager</a></li>
                        <li><a href="#"><i class="fa fa-sitemap fa-fw"></i>Workflow Designer</a></li>
                    </ul>
                </div>
            ​</div>