zoukankan html css js c++ java

jquery导航栏

整理了下比较常用的导航栏，其原理基本相同，一级菜单即主菜单，一级菜单的子元素就是二级菜单，二级菜单默认隐藏，通过鼠标移动来定位和显示二级菜单。

在Javascript中可以通过onmouseover和onmouseout事件来实现鼠标进入离开元素，在Jquery中则可以使用hover。代码如下：

$("#id").hover(
function(){
   //当鼠标放上去的时候,程序处理
},
function(){
   //当鼠标离开的时候,程序处理
});

以一个简单的菜单为例（结构）：

     <ul>
        <li>
            菜单一
            <div style="display:none;position:absolute;">
                <ul>
                    <li>子菜单一</li>
                    <li>子菜单二</li>
                </ul>
            </div>
        </li>
        <li>菜单二</li>
        <li>菜单三</li>
    </ul>
    <script>
        $("li").hover(function () {
            $(this).find("div").show();//这里还需要定位元素
        }, function () {
            $(this).find("div").hide();
        });
    </script>

结构很简单，主要的还是样式。下面是常用的示例（样式冲突，http://www.boapi.net/api/test.html 查看完整demo）：

网站首页

个人信息

个人申请

代码

<div class="c02-nav">
        <div class="item">
            网站首页
        </div>
        <div class="item">
            个人信息
            <div class="c02-menu">
                <ul>
                    <li class="head">个人申请</li>
                    <li><a>住房申请住房申请</a></li>
                    <li><a>借款申请</a></li>
                    <li><a>机票申请</a></li>
                </ul>
            </div>
        </div>
        <div class="item">
            个人申请
            <div class="c02-menu">
                <ul>
                    <li class="head">个人申请</li>
                    <li><a>住房申请住房申请</a></li>
                    <li><a>借款申请</a></li>
                    <li><a>机票申请</a></li>
                </ul>
                <ul>
                    <li class="head">其它申请</li>
                    <li><a>住房申请住房申请</a></li>
                    <li><a>借款申请</a></li>
                    <li><a>机票申请</a></li>
                </ul>
            </div>
        </div>
    </div>

html

* {
    padding: 0;
    margin: 0;
    font-family: 微软雅黑,宋体,sans-serif !important;
}

a, img {
    border: 0;
}

a {
    outline: 0;
}

    a:link {
        color: #434343;
        text-decoration: none;
    }

    a:visited {
        color: #838383;
        text-decoration: none;
    }

    a:hover {
        color: #C00;
        text-decoration: none;
    }

.c02-nav {
    background-repeat: repeat-x;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075);
    background-image: linear-gradient(to bottom,#fff 0,#f8f8f8 100%);
    height: 50px;
}

    .c02-nav .logo {
        float: left;
        width: 120px;
        margin-top: 10px;
        margin-left: 10px;
    }

    .c02-nav .item {
        display: inline-block;
        padding: 15px;
        color: #666;
        cursor: pointer;
        font-size: 15px;
    }

        .c02-nav .item:hover {
            color: #333;
            background-color: rgba(0,0,0,.075);
        }

.c02-menu {
    display: none;
    padding: 10px;
    z-index: 9999;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    -moz-box-shadow: 0 4px 16px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 4px 16px rgba(0,0,0,.5);
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=180, Strength=4);
}

    .c02-menu .head {
        font-size: 15px;
        font-weight: 700;
        line-height: 28px;
        margin-right: 0;
        margin-bottom: 2px;
        background: 0 0;
        padding-left: 3px;
    }

    .c02-menu ul {
        float: left;
        margin-bottom: 10px;
        list-style: none;
        padding-left: 5px;
    }

    .c02-menu li {
        line-height: 25px;
        margin-right: 15px;
        font-size: 14px;
        padding-left: 5px;
    }

    .c02-menu a:hover {
        text-decoration: underline;
    }

css

$(".c02-nav .item").hover(function () {
                var $offset = $(this).offset();
                $(this).find(".c02-menu").css({ "top": $offset.top + 48, "left": $offset.left, "display": "block" });
            }, function () {
                $(this).find(".c02-menu").css("display", "none");
});

代码

<div class="c03-nav">
        <ul class="menu ul">
            <li>
                <h3 class="selected"><a href="#" class="depth_1">网站首页</a></h3>
            </li>
            <li>
                <h3 id="menu_02"><a href="#" class="depth_1">个人信息</a></h3>
                <ul id="children_02" class="children">
                    <li>
                        <h3 id="menu_02a"><a href="#" class="depth_2"><span class="icon10"></span>个人申请</a></h3>
                        <ul id="children_02a">
                            <li><a href="#" class="depth_3">申请1</a></li>
                            <li><a href="#" class="depth_3">申请2</a></li>
                            <li><a href="#" class="depth_3">申请3</a></li>
                            <li><a href="#" class="depth_3">申请4</a></li>
                            <li><a href="#" class="depth_3">申请5</a></li>
                            <li><a href="#" class="depth_3">申请6</a></li>
                            <li><a href="#" class="depth_3">申请7</a></li>
                            <li><a href="#" class="depth_3">申请8</a></li>
                        </ul>
                    </li>
                    <li>
                        <h3 id="menu_02b"><a href="#" class="depth_2"><span class="icon10"></span>借款申请</a></h3>
                        <ul id="children_02b">
                            <li><a href="#" class="depth_3">申请1</a></li>
                            <li><a href="#" class="depth_3">申请2</a></li>
                            <li><a href="#" class="depth_3">申请3</a></li>
                            <li><a href="#" class="depth_3">申请4</a></li>
                            <li><a href="#" class="depth_3">申请5</a></li>
                            <li><a href="#" class="depth_3">申请6</a></li>
                            <li><a href="#" class="depth_3">申请7</a></li>
                            <li><a href="#" class="depth_3">申请8</a></li>
                        </ul>
                    </li>
                    <li>
                        <h3 id="menu_02c"><a href="#" class="depth_2"><span class="icon10"></span>机票申请</a></h3>
                        <ul id="children_02c">
                            <li><a href="#" class="depth_3">申请1</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <h3 id="H1"><a href="#" class="depth_1">个人申请</a></h3>
                <ul id="Ul1" class="children">
                    <li>
                        <h3 id="H2"><a href="#" class="depth_2"><span class="icon10"></span>个人申请</a></h3>
                        <ul id="Ul2">
                            <li><a href="#" class="depth_3">申请1</a></li>
                            <li><a href="#" class="depth_3">申请2</a></li>
                            <li><a href="#" class="depth_3">申请3</a></li>
                            <li><a href="#" class="depth_3">申请4</a></li>
                            <li><a href="#" class="depth_3">申请5</a></li>
                            <li><a href="#" class="depth_3">申请6</a></li>
                            <li><a href="#" class="depth_3">申请7</a></li>
                            <li><a href="#" class="depth_3">申请8</a></li>
                        </ul>
                    </li>
                    <li>
                        <h3 id="H3"><a href="#" class="depth_2"><span class="icon10"></span>借款申请</a></h3>
                        <ul id="Ul3">
                            <li><a href="#" class="depth_3">申请1</a></li>
                            <li><a href="#" class="depth_3">申请2</a></li>
                            <li><a href="#" class="depth_3">申请3</a></li>
                            <li><a href="#" class="depth_3">申请4</a></li>
                            <li><a href="#" class="depth_3">申请5</a></li>
                            <li><a href="#" class="depth_3">申请6</a></li>
                            <li><a href="#" class="depth_3">申请7</a></li>
                            <li><a href="#" class="depth_3">申请8</a></li>
                        </ul>
                    </li>
                    <li>
                        <h3 id="H4"><a href="#" class="depth_2"><span class="icon10"></span>机票申请</a></h3>
                        <ul id="Ul4">
                            <li><a href="#" class="depth_3">申请1</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

html

.c03-nav, .c03-nav h3, .c03-nav h3 a, .c03-nav li {
    background: url(../images/sprite.gif) no-repeat scroll left -9999px;
}

.c03-nav {
    height: 40px;
    line-height: 40px;
    background-repeat: repeat-x;
    background-position: 0 0;
    background-color: #C00;
    width: 100%;
}

    .c03-nav ul.menu li {
        position: relative;
        float: left;
        padding: 0 5px;
        background-position: 0 -40px;
        list-style-type: none;
    }

        .c03-nav ul.menu li h3 {
            padding: 0 15px 0 0;
            font-size: 1.2em;
        }

            .c03-nav ul.menu li h3 a.depth_1 {
                padding: 0 0 0 15px;
                display: inline-block;
                color: #FFF;
            }

            .c03-nav ul.menu li h3.hover, .c03-nav ul.menu li h3.selected {
                background-position: right -80px;
            }

                .c03-nav ul.menu li h3.hover a.depth_1, .c03-nav ul.menu li h3.selected a.depth_1 {
                    background-position: left -80px;
                    color: #C00;
                }

        .c03-nav ul.menu li.hover h3 {
            background-position: right -120px;
        }

            .c03-nav ul.menu li.hover h3 a.depth_1 {
                background-position: left -120px;
                color: #C00;
            }

        .c03-nav ul.menu li ul.children {
            position: absolute;
            left: 2px;
            top: 40px;
            z-index: 19;
            display: none;
            width: 393px;
            padding: 6px 7px 5px 6px;
            border: 3px solid #900;
            border-top: 0;
            background: #FFF;
        }

            .c03-nav ul.menu li ul.children li {
                width: 393px;
                padding: 0 0 1px 0;
                background: 0 0;
            }

                .c03-nav ul.menu li ul.children li.nosub {
                    width: 130px;
                    overflow: hidden;
                }

                .c03-nav ul.menu li ul.children li h3 a.depth_2 {
                    width: 120px;
                    line-height: 25px;
                    display: block;
                    font-weight: 400;
                    font-size: 9pt;
                    color: #900;
                }

                    .c03-nav ul.menu li ul.children li h3 a.depth_2 span.icon10 {
                        margin: 10px 3px 0 5px;
                        background-position: -60px -380px;
                    }

                .c03-nav ul.menu li ul.children li h3.selected {
                    background: #FFEFEF;
                }

                .c03-nav ul.menu li ul.children li.hover {
                    z-index: 20;
                }

                    .c03-nav ul.menu li ul.children li.hover h3 a.depth_2 {
                        background: #FFCFCF;
                        font-weight: 700;
                    }

                    .c03-nav ul.menu li ul.children li.hover ul {
                        background: #FFEFEF;
                        border-color: #FFBFBF;
                        height: auto;
                        z-index: 20;
                    }

                        .c03-nav ul.menu li ul.children li.hover ul li a.depth_3 {
                            color: #333;
                        }

                            .c03-nav ul.menu li ul.children li.hover ul li a.depth_3:hover {
                                color: #900;
                            }

            .c03-nav ul.menu li ul.children ul {
                position: absolute;
                top: 0;
                left: 120px;
                padding: 0 0 0 10px;
                width: 263px;
                height: 25px;
                overflow: hidden;
                background: #F4F8F9;
                border-left: 2px solid #D8E2EC;
            }

                .c03-nav ul.menu li ul.children ul li {
                    width: auto;
                    padding: 0;
                    float: left;
                }

                    .c03-nav ul.menu li ul.children ul li a.depth_3 {
                        margin: 0 15px 0 0;
                        line-height: 25px;
                        display: block;
                        color: #666;
                        white-space: nowrap;
                    }

                        .c03-nav ul.menu li ul.children ul li a.depth_3:hover {
                            text-decoration: underline;
                        }

                    .c03-nav ul.menu li ul.children ul li a.selected {
                        background: 0 0;
                        color: #900;
                    }

css

 var navstr = '';

            for (c in vars = '0'.split(',')) {
                $('#menu_' + vars[c]).addClass('selected');
            }

            $('.c03-nav ul.menu > li').hover(function () {
                $(this).find('.children').show();
                if ($(this).find('.children').length) $(this).addClass('hover');
            }, function () {
                $('.children').hide();
                $(this).removeClass('hover');
            });

            $('.c03-nav ul.menu h3, .c03-nav ul.menu ul.children > li').hover(function () {
                $(this).addClass('hover');
            }, function () {
                $(this).removeClass('hover');
            });

代码

<div class="c05-nav">
        <div class="list" id="navlist">
            <ul id="navfouce">
                <li><a href="#">网站首页</a></li>
                <li><a href="#">个人信息</a></li>
                <li><a href="#">个人申请</a></li>
            </ul>
        </div>
        <div class="box" id="navbox" style="height:0px;opacity:0;overflow:hidden;">
            <div class="cont" style="display:none;">
                <ul class="sublist clearfix">
                    <li>
                        <h3 class="mcate-item-hd"><span>申请1</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请1</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请1</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请1</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请1</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请1</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                            <a href="#">申请11</a>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="cont" style="display:none;">
                <ul class="sublist clearfix">
                    <li>
                        <h3 class="mcate-item-hd"><span>申请2</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请2</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请2</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请2</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                            <a href="#">申请22</a>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="cont" style="display:none;">
                <ul class="sublist clearfix">
                    <li>
                        <h3 class="mcate-item-hd"><span>申请</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                        </p>
                    </li>
                    <li>
                        <h3 class="mcate-item-hd"><span>申请</span></h3>
                        <p class="mcate-item-bd">
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                            <a href="#">申请</a>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </div>

html

.c05-nav {
    width: 100%;
    height: 41px;
    background: #074C52;
}

    .c05-nav .list ul {
        list-style-type: none;
    }

    .c05-nav .list li {
        float: left;
    }

    .c05-nav .list a {
        float: left;
        display: block;
        width: 95px;
        height: 42px;
        text-align: center;
        font: 700 14px/36px "微软雅黑";
        color: #fff;
    }

        .c05-nav .list a:hover {
            color: #FFA304;
        }

        .c05-nav .list a:hover, .nav .list .now {
            color: red;
            background: #fff;
        }

    .c05-nav .box {
        z-index: 10;
        position: absolute;
        left: -5px;
        top: 42px;
        width: 1006px;
        background: #FFF;
        overflow: hidden;
        height: 0;
        filter: alpha(opacity=0);
        opacity: 0;
        border-bottom: 2px solid #074c52;
    }

    .c05-nav .cont {
        position: relative;
        padding: 25px 0 0 24px;
    }

.sublist li {
    float: left;
    width: 168px;
    padding-right: 24px;
    padding-bottom: 24px;
}

    .sublist li h3.mcate-item-hd {
        font-family: '微软雅黑';
        padding-left: 2px;
        font-size: 14px;
        height: 26px;
        line-height: 26px;
        border-bottom: 1px dashed #666;
    }

    .sublist li p.mcate-item-bd {
        padding-left: 2px;
    }

        .sublist li p.mcate-item-bd a {
            height: 26px;
            line-height: 26px;
            margin-right: 5px;
            font-size: 12px;
            color: #666;
            text-decoration: none;
            display: inline-block;
        }

            .sublist li p.mcate-item-bd a:hover {
                color: #6c5143;
                text-decoration: underline;
            }

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    display: inline-table;
}

.clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

.clearfix {
    min-height: 1%;
}

css

var time = null;
            var list = $("#navlist");
            var box = $("#navbox");
            var lista = list.find("a");

            for (var i = 0, j = lista.length; i < j; i++) {
                if (lista[i].className == "now") {
                    var olda = i;
                }
            }

            var box_show = function (hei) {
                box.stop().animate({
                    height: hei,
                    opacity: 1
                }, 400);
            }

            var box_hide = function () {
                box.stop().animate({
                    height: 0,
                    opacity: 0
                }, 400);
            }

            lista.hover(function () {
                lista.removeClass("now");
                $(this).addClass("now");
                clearTimeout(time);
                var index = list.find("a").index($(this));
                box.find(".cont").hide().eq(index).show();
                var _top = $(this).offset().top + $(this).height();
                var _height = box.find(".cont").eq(index).height();
                $("#navbox").css("top", _top);
                box_show(_height)
            }, function () {
                time = setTimeout(function () {
                    box.find(".cont").hide();
                    box_hide();
                }, 50);
                lista.removeClass("now");
                lista.eq(olda).addClass("now");
            });

            box.find(".cont").hover(function () {
                var _index = box.find(".cont").index($(this));
                lista.removeClass("now");
                lista.eq(_index).addClass("now");
                clearTimeout(time);
                $(this).show();
                var _height = $(this).height() + 54;
                box_show(_height);
            }, function () {
                time = setTimeout(function () {
                    $(this).hide();
                    box_hide();
                }, 50);
                lista.removeClass("now");
                lista.eq(olda).addClass("now");
            });

网站首页

个人信息

住房申请

借款申请

机票申请

其他

个人申请

住房申请借款申请

申请1 申请1

申请2

代码

<div class="c04-nav" style="clear:both;">
        <ul>
            <li class="nav-item" id="c04-home"><a href="#" class="nav-item-link">网站首页</a></li>
            <li class="nav-item" id="personal">
                <a href="#" class="nav-item-link">个人信息</a>
                <div class="nav-item-sub sl-shadow">
                    <table class="nav-item-table">
                        <thead>
                            <tr>
                                <th>住房申请</th>
                                <th>借款申请</th>
                                <th>机票申请</th>
                                <th class="last">其他</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><a href="#">申请1</a></td>
                                <td><a href="#">申请1</a></td>
                                <td><a href="#">申请1</a></td>
                                <td class="last"><a href="#">申请1</a></td>
                            </tr>
                            <tr>
                                <td><a href="#">申请2</a></td>
                                <td><a href="#">申请2</a></td>
                                <td><a href="#">申请2</a></td>
                                <td class="last"><a href="#">申请2</a></td>
                            </tr>
                            <tr>
                                <td><a href="#">申请3</a></td>
                                <td><a href="#">申请3</a></td>
                                <td><a href="#">申请3</a></td>
                                <td class="last"><a href="#">申请3</a></td>
                            </tr>
                            <tr>
                                <td><a href="#">申请4</a></td>
                                <td><a href="#">申请4</a></td>
                                <td><a href="#">申请4</a></td>
                                <td class="last"><a href="#">申请4</a></td>
                            </tr>
                            <tr>
                                <td><a href="#">申请5</a></td>
                                <td><a href="#">申请5</a></td>
                                <td><a href="#">申请5</a></td>
                                <td class="last"><a href="#">申请5</a></td>
                            </tr>
                            <tr>
                                <td><a href="#">申请6</a></td>
                                <td><a href="#">其他...</a></td>
                                <td></td>
                                <td class="last"><a href="#">申请6</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="angle sl-angle"></div>
            </li>
            <li class="nav-item" id="payment">
                <a href="#" class="nav-item-link">个人申请</a>
                <div class="nav-item-sub sl-shadow">
                    <table class="nav-item-table">
                        <thead>
                            <tr>
                                <th>住房申请</th>
                                <th class="last">借款申请</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><a href="#">申请1</a></td>
                                <td class="last"><a href="#">申请1</a></td>
                            </tr>
                            <tr>
                                <td><a href="#">申请2</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="angle sl-angle"></div>
            </li>
        </ul>
    </div>

html

.c04-nav {
    width: 100%;
    height: 45px;
    z-index: 999;
    background-color: #fff;
}

.nav-item {
    float: left;
    height: 45px;
    position: relative;
    list-style-type: none;
    background-color: #fff;
}

    .nav-item .nav-item-link {
        height: 45px;
        display: block;
        overflow: hidden;
        line-height: 45px;
        font-size: 15px;
        text-align: center;
    }

        .nav-item .nav-item-link, .nav-item .nav-item-link-active, .nav-item .nav-item-link:hover {
            background-repeat: no-repeat;
        }

.nav-item-sub {
    position: absolute;
    padding: 12px 3px;
    background: #fff;
    top: 45px;
}

.nav-item-table {
    background: none repeat scroll 0 0 #fff;
    white-space: nowrap;
}

    .nav-item-table td, .nav-item-table th {
        border-right: 1px solid #e7e7e7;
        padding: 3px 16px;
        white-space: nowrap;
    }

    .nav-item-table th {
        font-weight: 700;
        padding: 0 14px 3px 17px;
        border-collapse: separate;
        white-space: nowrap;
    }

        .nav-item-table td.last, .nav-item-table th.last {
            border-right: 0;
        }

    .nav-item-table a {
        color: #a0a0a0;
        display: block;
        padding-left: 3px;
        position: relative;
        vertical-align: middle;
    }

        .nav-item-table a:hover {
            background-color: #aaa;
            border-radius: 2px 2px 2px 2px;
            color: #fff;
            text-decoration: none;
            vertical-align: middle;
        }

.nav-item .nav-item-sub {
    display: none;
    z-index: 10;
}

.nav-item .angle {
    position: absolute;
    display: none;
    width: 15px;
    height: 15px;
    font-size: 0;
    top: 35px;
    right: 65px;
}

:root .angle {
    top: 35px;
    z-index: 10;
}

.nav-item-hover .nav-item-sub, .nav-item:hover .nav-item-sub {
    display: block;
}

.nav-item-hover .angle, .nav-item:hover .angle {
    display: block;
}

#c04-home .nav-item-link {
    width: 90px;
}

#personal .nav-item-link {
    width: 110px;
}

#personal .nav-item-sub {
    left: -44px;
}

#payment .nav-item-link {
    width: 110px;
    background-position: -221px -14px;
    margin-right: 20px;
}

    #payment .nav-item-link-active, #payment .nav-item-link:hover {
        background-position: -251px -75px;
    }

#payment .nav-item-sub {
    left: -83px;
}

.sl-shadow {
    -moz-box-shadow: 0 0 4px #999;
    -o-box-shadow: 0 0 4px #999;
    -webkit-box-shadow: 0 0 4px #999;
    box-shadow: 0 0 4px #999;
    -ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#a0a0a0,strength=0) progid:DXImageTransform.Microsoft.Shadow(color=#a0a0a0,direction=0,strength=2) progid:DXImageTransform.Microsoft.Shadow(color=#a0a0a0,direction=90,strength=2) progid:DXImageTransform.Microsoft.Shadow(color=#a0a0a0,direction=180,strength=2) progid:DXImageTransform.Microsoft.Shadow(color=#a0a0a0,direction=270,strength=2)";
}

.sl-angle {
    background-image: url(../images/3MxQutehzH.png);
}

.sl-angle {
    background-repeat: no-repeat;
    background-position: -385px -11px;
    overflow: hidden;
}

css

(function(a, b) {
    function r(a) {
        var b = -1;
        while (++b < f) a.createElement(e[b])
    }
    if (!(!window.attachEvent || !b.createStyleSheet || !
    function() {
        var a = document.createElement("div");
        a.innerHTML = "<elem></elem>";
        return a.childNodes.length !== 1
    }())) {
        a.iepp = a.iepp || {};
        var c = a.iepp,
            d = c.html5elements || "abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",
            e = d.split("|"),
            f = e.length,
            g = new RegExp("(^|\s)(" + d + ")", "gi"),
            h = new RegExp("<(/*)(" + d + ")", "gi"),
            i = /^s*[{}]s*$/,
            j = new RegExp("(^|[^\n]*?\s)(" + d + ")([^\n]*)({[\n\w\W]*?})", "gi"),
            k = b.createDocumentFragment(),
            l = b.documentElement,
            m = l.firstChild,
            n = b.createElement("body"),
            o = b.createElement("style"),
            p = /print|all/,
            q;
        c.getCSS = function(a, b) {
            if (a + "" === undefined) return "";
            var d = -1,
                e = a.length,
                f, g = [];
            while (++d < e) {
                f = a[d];
                if (f.disabled) continue;
                b = f.media || b, p.test(b) && g.push(c.getCSS(f.imports, b), f.cssText), b = "all"
            }
            return g.join("")
        }, c.parseCSS = function(a) {
            var b = [],
                c;
            while ((c = j.exec(a)) != null) b.push(((i.exec(c[1]) ? "
" : c[1]) + c[2] + c[3]).replace(g, "$1.iepp_$2") + c[4]);
            return b.join("
")
        }, c.writeHTML = function() {
            var a = -1;
            q = q || b.body;
            while (++a < f) {
                var c = b.getElementsByTagName(e[a]),
                    d = c.length,
                    g = -1;
                while (++g < d) c[g].className.indexOf("iepp_") < 0 && (c[g].className += " iepp_" + e[a])
            }
            k.appendChild(q), l.appendChild(n), n.className = q.className, n.id = q.id, n.innerHTML = q.innerHTML.replace(h, "<$1font")
        }, c._beforePrint = function() {
            o.styleSheet.cssText = c.parseCSS(c.getCSS(b.styleSheets, "all")), c.writeHTML()
        }, c.restoreHTML = function() {
            n.innerHTML = "", l.removeChild(n), l.appendChild(q)
        }, c._afterPrint = function() {
            c.restoreHTML(), o.styleSheet.cssText = ""
        }, r(b), r(k);
        if (c.disablePP) return;
        m.insertBefore(o, m.firstChild), o.media = "print", o.className = "iepp-printshim", a.attachEvent("onbeforeprint", c._beforePrint), a.attachEvent("onafterprint", c._afterPrint)
    }
})(this, document)

如果不全或错误可以在 http://www.boapi.net/api/test.html 查看完整demo，没有的资源记得右键源代码

查看全文

相关阅读:
MDX函数
 OLAP + MDX
AIOps指导
 ES Terms 聚合数据不确定性
 redis初步入门
 java写hadoop全局排序
 ［工程技巧］
python与字符集编码
 转载python2进制打包相关
 转载　大端ＶＳ小端

原文地址：https://www.cnblogs.com/liuxiaobo93/p/5505429.html