<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="footer-menu"> <div class="header"> <div class="clear-button gt-hats-x">x</div> <div class="header-title">Why are you using Google Translate today?</div> </div> <div class="content"> <div class="menu-item">I am currently traveling abroad.</div> <div class="menu-item">I am currently traveling abroad.</div> <div class="menu-item">I am currently traveling abroad.</div> <div class="menu-item">I am currently traveling abroad.</div> <div class="menu-item">I am currently traveling abroad.</div> </div> </div>

.footer-menu { background-color: #fff; border: 1px solid #ddd; bottom: 0; box-shadow: 1px -1px 6px #ccc; position: fixed; right: 32px; z-index: 9999999; } .footer-menu .header { background-color: #f2f2f2; border-bottom: 1px solid #ddd; padding: 10px 0 10px 19px; font-size:14px; } .header div.header-title { color: #222; font-size: 14px; font-weight: bold; margin-right: 36px; } .footer-menu .content { background: none repeat scroll 0 0 #fff; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); cursor: default; font-size: 13px; margin: 0; outline: medium none; padding: 6px 0; position: absolute; transition: opacity 0.218s ease 0s; /* override */ border: medium none; position: relative; } div.menu-item { padding: 6px 8em 6px 30px font-size: 13px; height: 22px; line-height: 22px; padding-left: 19px; } .gt-hats-x { position: absolute; right: 8px; top: 14px; } .clear-button { cursor: pointer; height: 18px; line-height: 18px; width: 18px; }