dropdown.css

Back

.drop-box{
    position:relative;
}
.drop-box .drop-button{
    color:#444;
    display:block;
    font-size:12px;
    font-weight:bold;
    position:relative;
    text-align:left;
    text-decoration:none;
}
.drop-box .drop-content{
    background-color:#fff;
    box-shadow:0 6px 12px #80397b;
    clear:both;
    position:absolute;
    display:none;
    z-index:1000;
}
.drop-box .drop-content p.wait{
    text-align:center;
    margin:10px 0;
}
.drop-box .drop-content.left{
    left:0;
}
.drop-box .drop-content.left:after,
.drop-box .drop-content.left:before{
    left:10px;
}
.drop-box .drop-content.left:before{
    margin-left:-6px;
}
.drop-box .drop-content.right{
    right:0;
}
.drop-box .drop-content.right:after,
.drop-box .drop-content.right:before{
    right:10px;
}
.drop-box .drop-content.right:before{
    margin-right:-6px;
}
.drop-box .drop-content.top{
    border-top:4px solid #80397b;
    border-radius:0 0 5px 5px;
}
.drop-box .drop-content.top:after,
.drop-box .drop-content.top:before{
    bottom:100%;
    border:solid transparent;
    content:" ";
    height:0;
    width:0;
    position:absolute;
    pointer-events:none;
}
.drop-box .drop-content.top:after{
    border-color:rgba(136, 183, 213, 0);
    border-bottom-color:#fff;
    border-width:6px;
}
.drop-box .drop-content.top:before{
    border-color:rgba(194, 225, 245, 0);
    border-bottom-color:#80397B;
    border-width:12px;
}
.drop-box .drop-content.bottom{
    border-bottom:4px solid #80397b;
    border-radius:5px 5px 0 0;
}
.drop-box .drop-content.bottom:after,
.drop-box .drop-content.bottom:before{
    top:100%;
    left:10px;
    border:solid transparent;
    content:" ";
    height:0;
    width:0;
    position:absolute;
    pointer-events:none;
}
.drop-box .drop-content.bottom:after{
    border-color:rgba(136, 183, 213, 0);
    border-top-color:#fff;
    border-width:6px;
}
.drop-box .drop-content.bottom:before{
    border-color:rgba(194, 225, 245, 0);
    border-top-color:#80397B;
    border-width:12px;
}
.drop-box .drop-content .drop-title{
    border-bottom:1px solid #e5e5e5;
    padding:4px;
    position:relative;
  	height: 20px;
}
.drop-box .drop-content .drop-title > i.fa{
    margin-right:5px;
}
.drop-box .drop-content .drop-title .drop-close{
    color:#333;
    font-size:12px;
    font-weight:bold;
    line-height:1px;
    opacity:1;
    padding:3px 4px;
    position:absolute;
    right:7px;
    top:0;
    cursor:pointer;
}
.drop-box .drop-content .drop-title .drop-close:hover{
    background-color:#80397b;
    border-radius:50%;
    color:#fff;
}
.drop-box .drop-content .drop-description ul.list-link{
    list-style:none;
    padding:0;
}
.drop-box .drop-content .drop-description ul.list-link li{
    clear:both;
    width:100%;
}
.drop-box .drop-content .drop-description ul.list-link li a{
    display:block;
    text-decoration:none;
    color:#333;
    margin:1px;
    padding:5px;
}
.drop-box .drop-content .drop-description ul.list-link li a:hover, .drop-box .drop-content .drop-description ul.list-link li a.active{
    background:#80397B;
    color:#fff
}
.drop-box .drop-content .drop-description ul.list-link li a i.fa{
    margin-right:5px;
}