#noti {
    position: relative;
}
.box {
    position:absolute;
    left:50%;
    top: -2rem;
    transform:translate(-50%,-50%);
	z-index: 1040;
}
.box:hover {
	z-index: 1040;
}
.box .notifications {
    width:60px;
    height:60px;
    background:#fff;
    border-radius:30px;
    box-sizing:border-box;
    text-align:center;
    box-shadow:0 2px 5px rgba(0,0,0,.2);
}
.box .notifications:hover {
    width:350px;
    height:60px;
    text-align:left;
    padding:0 15px;
    background:#ff2c74;
    transform:translateY(-100%);
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}
.box .notifications:hover .fa {
    color:#fff;
}
.box .notifications .fa {
    color:#cecece;
    line-height:60px;
    font-size:30px;
}
.box .notifications .num {
    position:absolute;
    top:0;
    right:-5px;
    width:25px;
    height:25px;
    border-radius:50%;
    background:#ff2c74;
    color:#fff;
    line-height:25px;
    font-family:sans-serif;
    text-align:center;
}
.box .notifications:hover .num {
    position:relative;
    background:transparent;
    color:#fff;
    font-size:24px;
    top:-4px;
}
.box .notifications:hover .num:after {
    content:' Notification';
}
.box ul {
    position:absolute;
    left:0;
    top:50px;
    margin:0;
    width:100%;
    background:#fff;
    box-shadow:0 5px 15px rgba(0,0,0,.5);
    padding:20px;
    box-sizing:border-box;
    border-bottom-left-radius:30px;
    border-bottom-right-radius:30px;
    display:none;
}
.box .notifications:hover ul {
    display:block;
}
.box ul li {
    list-style:none;
    border-bottom:1px solid rgba(0,0,0,.1);
    padding:8px 0;
    display:flex;
}
.box ul li:last-child {
    border-bottom:none;
}
.box ul li .icon {
    width:24px;
    height:24px; 
    background:#ccc;
    border-radius:50%;
    text-align:center;
    line-height:24px;
    margin-right:15px;
}
.box ul li .icon .fa {
    color:#fff;
    font-size:16px;
    line-height:24px;
}
.box ul li .text {
    position:relative;
    font-family:sans-serif;
    top:3px;
    cursor:pointer;
}
.box ul li:hover .text {
    font-weight:bold;
    color:#ff2c74;
}