<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 ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <div class="container"> <center><h2>CSS3 Minicart</h2></center> <div class="row"> <div class="col-md-12"> <div class="login_bar"> <ul> <li><a href="#">Login</a></li> <li><a href="#">Register</a></li> <li class="shop-cart"><a href="#">Cart<span>(0)</span></a> <ul class="minicart"> <li> <div class="cart-img"></div> <div class="cart-content"> <h3>Water Repellent</h3> <div class="cart-price"> <span class="new-price">$325.99</span> <span class="old-price">$330.99</span> </div> </div> <div class="delete-icon"><a href="#"><i class="far fa-trash-alt"></i></a></div> </li> <li> <div class="cart-img"></div> <div class="cart-content"> <h3>Water Repellent</h3> <div class="cart-price"> <span class="new-price">$325.99</span> <span class="old-price">$330.99</span> </div> </div> <div class="delete-icon"><a href="#"><i class="far fa-trash-alt"></i></a></div> </li> <li> <div class="cart-img"></div> <div class="cart-content"> <h3>Water Repellent</h3> <div class="cart-price"> <span class="new-price">$325.99</span> <span class="old-price">$330.99</span> </div> </div> <div class="delete-icon"><a href="#"><i class="far fa-trash-alt"></i></a></div> </li> <li> <div class="total-price"> <span class="f-left">Total:</span> <span class="f-right">$4000</span> </div> </li> <li> <div class="checkout-btn"> <a href="#">Check out</a> </div> </li> </ul> </li> </ul> </div> </div> </div> </div>

.login_bar { float: right; } .login_bar ul { margin: 0; padding: 0; } .login_bar ul li { list-style: none; display: inline-block; margin: 0 20px 0 0; } .login_bar ul li:last-child { margin: 0; } .login_bar ul li a { font-family: "Poppins", sans-serif; font-weight: 400; letter-spacing: 1px; font-size: 12px; color: #222222; text-transform: uppercase; } .login_bar ul li a span { margin: 0 5px; } .login_bar ul li a:hover { text-decoration: none; color: #dd7e2e; } .login_bar ul li a.en { border: 1px solid #222; padding: 2px 14px; } .login_bar ul li.shop-cart ul.minicart { background: #222222; padding: 30px; position: absolute; right: 1em; top: 100%; transition: all 0.5s ease 0s; width: 330px; z-index: 99; margin-top: 10px; box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; } .login_bar ul li.shop-cart ul.minicart li { display: block; margin: 0 0 22px; overflow: hidden; position: relative; } .login_bar ul li.shop-cart ul.minicart li:last-child { margin: 0; } .login_bar ul li.shop-cart ul.minicart .total-price span { color: #FFFFFF; font-weight: 400; font-family: "Poppins", sans-serif; font-size: 13px; } .login_bar ul li.shop-cart ul.minicart .f-left { float: left; } .login_bar ul li.shop-cart ul.minicart .f-right { float: right; } .login_bar ul li.shop-cart:hover ul.minicart { opacity: 1; visibility: visible; } .login_bar .minicart .cart-img { border: 1px solid #fff; float: left; width: 80px; height: 90px; background: #e3e3e3; } .login_bar .minicart .cart-content { float: left; padding-left: 15px; text-align: left; } .login_bar .minicart .cart-content h3 { color: #aaaaaa; font-size: 13px; margin: 0 0 2px; font-family: "Poppins", sans-serif; } .login_bar .minicart .cart-price .new-price { color: #fff; font-family: Oswald; font-weight: 400; font-size: 15px; } .login_bar .minicart .cart-price .old-price { color: #aaaaaa; font-size: 12px; font-family: Oswald; text-decoration: line-through; } .login_bar .minicart .delete-icon { float: right; } .login_bar .minicart .delete-icon a i { font-size: 14px; color: #fff; transition: 0.3s; } .login_bar .minicart .delete-icon a i:hover { color: #aeaeae; } .login_bar .minicart .total-price { overflow: hidden; border-top: 1px solid #333333; padding: 20px 0 0; margin: 6px 0 0; } .login_bar .minicart .checkout-btn a { text-align: center; display: block; background: #000; font-family: "Poppins"minicart, sans-serif; padding: 18px 40px; color: #ffffff; transition: 0.3s; } .login_bar .minicart .checkout-btn a:hover { color: #b4b4b4; }