.selectBox {
    margin: 50px auto; /*居中*/
    width: 150px;
    text-align: center;
}

    .selectBox a {
        color: #1b1b1b;
        text-decoration: none;
    }

    .selectBox ul, .selectBox li {
        list-style: none;
    }

    .selectBox span {
        line-height: 46px;
        background-color: #85ea2d;
        display: block;
        margin-bottom: 20px;
        position: relative;
        z-index: 2;
        border-radius: 5px;
        -webkit-transition: all .2s ease-in;
        transition: all .2s ease-in;
    }

.drop {
    left: 0;
    right: 0;
    top: -9999px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    position: absolute;
    z-index: 1;
    -webkit-transform: translateY(-50px); /*y轴方向平移*/
    transform: translateY(-50px);
    opacity: 0;
    -webkit-transition: all .2s ease-in; /*平移时间0.2s*/
    transition: all .2s ease-in;
}
/*给送个下拉助攻*/
.selectBox:hover span {
    background-color: #74ea0d;
}

    .selectBox:hover span a:after {
        -webkit-transform: rotate(180deg); /*旋转180度*/
        transform: rotate(180deg);
    }

.selectBox:hover .drop {
    position: static;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.drop li:first-child:before {
    content: " ";
    font-size: 0;
    line-height: 0;
    margin: 0 auto; /*居中*/
    display: block; /*独占一行*/
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); /*配合整体一样的投影*/
    background-color: #fff;
    width: 10px;
    height: 10px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); /*一个正方形倾斜四十五度就是三角了但是要把下半部分藏起来*/
    position: relative;
    top: -5px; /*果断的露出上半部分*/
    z-index: 1; /*果断的隐藏下半部分*/
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

.drop li a {
    color: #888;
    line-height: 46px;
    border-bottom: solid 1px #eee;
    font-size: 14px;
    display: block;
    background-color: #fff; /*要有背景色才能盖住呀*/
    position: relative;
    z-index: 2; /*这里很重要 要挡住三角形的下半部分*/
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
.drop li:first-child a {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-top: -10px;
}

.drop li:last-child a {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom: none;
}
.drop li:hover:before {
    background-color: #85ea2d;
}

.drop li:hover a {
    background-color: #85ea2d;
    color: #fff;
}