<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 ----------> <script src="https://use.fontawesome.com/07b0ce5d10.js"></script> <div class="container"> <div class="noti-wrap"> <div class="noti__item js-item-menu"> <i class="fa fa-bell"></i> <div class="email-dropdown js-dropdown"> <div class="email__title"> <p>You have 3 New Emails</p> </div> <div class="email__item"> <div class="image img-cir img-40"> <img src="images/icon/avatar-06.jpg" alt="Cynthia Harvey"> </div> <div class="content"> <p>Meeting about new dashboard...</p> <span>Cynthia Harvey, 3 min ago</span> </div> </div> <div class="email__item"> <div class="image img-cir img-40"> <img src="images/icon/avatar-05.jpg" alt="Cynthia Harvey"> </div> <div class="content"> <p>Meeting about new dashboard...</p> <span>Cynthia Harvey, Yesterday</span> </div> </div> <div class="email__item"> <div class="image img-cir img-40"> <img src="images/icon/avatar-04.jpg" alt="Cynthia Harvey"> </div> <div class="content"> <p>Meeting about new dashboard...</p> <span>Cynthia Harvey, April 12,,2018</span> </div> </div> <div class="email__footer"> <a href="#">See all emails</a> </div> </div> </div> <div class="noti__item js-item-menu"> <i class="fa fa-envelope"></i> </div> <div class="noti__item js-item-menu"> <i class="fa fa-bars"></i> </div> </div> </div>

.noti__item { position: relative; margin-right: 35px; display: inline-block; cursor: pointer; } i { font-size: 30px; color: #a9b3c9; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; vertical-align: middle; } .noti-wrap { height: 45px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .show-dropdown .js-dropdown { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .email-dropdown { top: 49px; left: -53px; } .email-dropdown{ position: absolute; z-index: 9999; min-width: 340px; background: #fff; -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1); border: 1px solid #e5e5e5; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; top: 100%; left: 0; } .mess__title, .email__title, .notifi__title { padding: 22px; border-bottom: 1px solid #f2f2f2; cursor: default; } .email__item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; padding: 19px 22px; padding-bottom: 14px; border-bottom: 1px solid #f2f2f2; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; }