• HTML
• CSS

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">

<div class="box">
    <div class="notifications">
        <i class="fas fa-bell"></i>
        <span class="num">4</span>
        <ul>
            <li class="icon">
                <span class="icon"><i class="fas fa-user"></i></span>
                <span class="text">Someone Like Your Post</span>
            </li>
            <li class="icon">
                <span class="icon"><i class="fas fa-user"></i></span>
                <span class="text">Someone Like Your Photo</span>
            </li>
            <li class="icon">
                <span class="icon"><i class="fas fa-user"></i></span>
                <span class="text">Someone Dislike Your Post</span>
            </li>
            <li class="icon">
                <span class="icon"><i class="fas fa-user"></i></span>
                <span class="text">Someone Comment on Your Post</span>
            </li>
        </ul>
    </div>
</div>

CSS

body
{
    margin:0;
    padding:0;
    background:#d60049;
}
.box
{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
.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);
}
.notifications:hover
{
    width:300px;
    height:60px;
    text-align:left;
    padding:0 15px;
    background:#ff2c74;
    transform:translateY(-100%);
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}
.notifications .fas
{
    color:#cecece;
    line-height:60px;
    font-size:30px;
}
.notifications:hover .fas
{
    color:#fff;
}
.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;
}
.notifications:hover .num
{
    position:relative;
    background:transparent;
    color:#fff;
    font-size:24px;
    top:-4px;
}
.notifications:hover .num:after
{
    content:' Notification';
}
ul
{
    position:absolute;
    left:0;
    top:60px;
    margin:0;
    padding:0;
    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;
}
.notifications:hover ul
{
    display:block;
}
ul li
{
    list-style:none;
    border-bottom:1px solid rgba(0,0,0,.1);
    padding:8px 0;
    display:flex;
}
ul li:last-child
{
    border-bottom:none;
}
ul li .icon
{
    width:24px;
    height:24px;
    background:#ccc;
    border-radius:50%;
    text-align:center;
    line-height:24px;
    margin-right:15px;
}
ul li .icon .fas
{
    color:#fff;
    font-size:16px;
    line-height:24px;
}
ul li .text
{
    position:relative;
    font-family:sans-serif;
    top:3px;
    cursor:pointer;
}
ul li:hover .text
{
    font-weight:bold;
    color:#ff2c74;
}

/* All the credits : https://www.youtube.com/watch?v=mtV_nKAeD84 */