<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://cdn.rtlcss.com/bootstrap/v4.2.1/css/bootstrap.min.css" integrity="sha384-vus3nQHTD+5mpDiZ4rkEPlnkcyTP+49BhJ4wJeJunw06ZAp+wzzeBPUXr42fi8If" crossorigin="anonymous"> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <div class="col-md-2 logo"> <a href="#"><img src="css/img/B_logo.png" alt="LOGO"></a> </div> <div class="col-md-7"> <div class="wrapper"> <ul class="menu-ul"> <li class="menu-item"><a href="#">صفحه اصلی</a></li> <li class="menu-item"><a href="#">محصولات</a></li> <li class="menu-item"><a href="#">درباره ما</a></li> <li class="menu-item"><a href="#">تماس با ما</a></li> </ul> </div> </div> </div> </div>

body{ margin:0; padding:0; background-color:#F5F5F5; } a{ text-decoration:none; color:#050505; } a:hover{ text-decoration:none; color:black; } @font-face{ font-family:'yekan'; src:url(yekan/yekan.eot) format("eot"), url(yekan/yekan.woff) format("woff"), url(yekan/yekan.woff2) format("woff2"), url(yekan/yekan.ttf) format("truetype"); } * { font-family:yekan; font-size:20px; } .logo img{ max-width:125px; margin-top:5px; } .mega-menu{ background-color:#ffffff; box-shadow: 0 10px 10px #efefef; } .wrapper{ min-height:150px; align-items:center; justify-content:center; background-color:#E42535; display:flex; background-color:#ffffff; } .menu-ul{ width:100%; display:flex; list-style:none; justify-content:center; align-items:center; text-align: center; } .menu-item{ position:relative; padding:0 20px; overflow:hidden; height:50px; padding-top:12px; z-index:10; } .menu-item a{ z-index: 10; position:relative; } .menu-item:hover{ background-color:#E01A4F; height:50px; } .menu-item::before{ content:""; position:absolute; top:0; right:0; width:100%; height:100%; border:3px solid transparent; } .menu-item:hover::before{ animation:animate1 0.8s linear forwards; } @keyframes animate1{ 0%{ width:0; height:0; border-top-color:#1C2321; border-right-color:#1C2321; } 100%{ width:100%; height:100% ; border-top-color:#1C2321; border-right-color:#1C2321; } } .menu-item::after{ content:""; position:absolute; bottom:0; left:0; width:100%; height:100%; border:3px solid transparent; } .menu-item:hover::after{ animation:animate2 0.8s linear forwards; } @keyframes animate2{ 0%{ width:0; height:0; border-bottom-color:#1C2321; border-left-color:#1C2321; } 100%{ width:100%; height:100% ; border-bottom-color:#1C2321; border-left-color:#1C2321; } }