<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2 class="center">Notification with viwe list when hover the bell icon</h2> <div class="box"> <div class="notifications"> <i class="fa fa-bell"></i> <span class="num">4</span> <ul> <li class="icon"> <span class="icon"><i class="fa fa-user"></i></span> <span class="text">Someone Like Your Post</span> </li> <li class="icon"> <span class="icon"><i class="fa fa-user"></i></span> <span class="text">Someone Like Your Photo</span> </li> <li class="icon"> <span class="icon"><i class="fa fa-user"></i></span> <span class="text">Someone Dislike Your Post</span> </li> <li class="icon"> <span class="icon"><i class="fa fa-user"></i></span> <span class="text">Someone Comment on Your Post</span> </li> </ul> </div> </div> </div> </div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

body { margin:0px; padding:0px; background:#d60049; } .box { position:absolute; top:50%; left:50%; transform:translate(-50%,-80%); } .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:hover .fa { color:#fff; } .notifications .fa { color:#cecece; line-height:60px; font-size:20px; } .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: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; } .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 .fa { 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; } h2{ color:#fff; text-align:center; }