.navBanner {
    position: relative;
}

    .navBanner .navBox {
        width: 240px;
        height: 448px;
        position: absolute;
        top: 93px;
        left: 0;
        background: rgba(0,0,0,.5);
        z-index:999;
    }

.navItem {
    margin-top: 14px;
    padding-left: 26px;
    position: relative;
    height: 89px;
}

    .navItem .title {
        color: white;
        font-weight: bold;
        font-size: 16px;
        height: 30px;
        line-height: 30px;
    }

.navSubList {
    padding-right: 0px
}

    .navSubList a {
        display: inline-block;
        margin-right: 13px;
        color: #fff;
        height: 24px;
        line-height: 24px;
        text-decoration: none;
    }

.navSubListBox {
    position: absolute;
    top: 0;
    left: 240px;
    width: 262px;
    height: auto;
    padding: 0 20px;
    border: 1px solid #ddd;
    background-color: rgba(255,255,255,.9);
    display: none;
    background: url(http://e.kaoyan365.cn/public/kaoyan/v2/home/images/navrightbf_03.png);
}

.navSubListBoxItem {
    margin: 22px 0px;
}

    .navSubListBoxItem .sub-name {
        font-weight: bold;
        color: #000;
        font-size: 16px;
    }

    .navSubListBoxItem .subLiBox {
        margin: 10px 0;
    }

        .navSubListBoxItem .subLiBox .subLi {
            display: inline-block;
            margin-right: 20px;
            height: 24px;
            line-height: 24px;
        }

.navItem:before {
    content: '';
    width: 3px;
    height: 0;
    background: url(http://e.kaoyan365.cn/public/kaoyan/v2/home/images/navbg1.png) no-repeat center top;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -44.5px;
    transition: height 0.5s;
}

.navItem:hover .title {
    color: #1199D9
}

.navItem:hover:before {
    height: 89px;
}

.navItem1 .navSubListBox {
    top: -14px;
}

.navItem2 .navSubListBox {
    top: -117px;
}

.navItem3 .navSubListBox {
    top: -220px;
}

.navItem4 .navSubListBox {
    top: -323px;
}
.subLi:hover, .navSubList a:hover {
    color: red;
}