"Horizontal Collapse Multi Level Menus Design HTML CSS"
Bootstrap 4.1.1 Snippet by nitesh575

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Horizontal Collapse Multi Level Menus Design HTML CSS</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Font Awesome --> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> </head> <body> <div class="container mt-5"> <div class="row"> <div class="col-lg-12"> <h4>Horizontal Collapse Multi Level Menus Design HTML CSS</h4> <p><a href="https://thethoughtoftheday.com/">More Trending Design & Tutorial</a></p> </div> </div> </div> <section class="mrnu-first mb-5"> <div class="container"> <div class="row mt-4 menu-two d-none d-lg-flex"> <div class="col-lg-10 col-md-10 d-flex"> <ul class="d-flex list-unstyled"> <li class="nav-item"> <a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseIndustries" aria-expanded="false" aria-controls="collapseIndustries"> Home <i class="fas fa-chevron-right ms-1"></i> </a> <div id="collapseIndustries" class="collapse list-absolute sub-menu"> <ul class="d-flex list-unstyled ps-3"> <li> <a href="#" class="nav-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseIGaming" aria-expanded="false" aria-controls="collapseIGaming"> Photo Gallery </a> </li> <li> <a href="#" class="nav-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseBlockchain" aria-expanded="false" aria-controls="collapseBlockchain"> Celbs News </a> </li> <li><a href="" class="nav-link collapsed">Share Market</a></li> <li><a href="" class="nav-link collapsed">Real Estate</a></li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link collapsed" href="">State</a> </li> <li class="nav-item"> <a class="nav-link collapsed" href="">Opinion</a> </li> <li class="nav-item"> <a class="nav-link collapsed" href="">Lifestyle</a> </li> <li class="nav-item"> <a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseEntertainment" aria-expanded="false" aria-controls="collapseIndustries"> Entertainment <i class="fas fa-chevron-right ms-1"></i> </a> <div id="collapseEntertainment" class="collapse list-absolute sub-menu"> <ul class="d-flex list-unstyled ps-3"> <li> <a href="#" class="nav-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseIGaming" aria-expanded="false" aria-controls="collapseIGaming"> Breaking News </a> </li> <li> <a href="#" class="nav-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseBlockchain" aria-expanded="false" aria-controls="collapseBlockchain"> Trending News </a> </li> <li><a href="" class="nav-link collapsed">Todays Breakings</a></li> <li><a href="" class="nav-link collapsed">Celbs Breakings</a></li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link collapsed" href="">Sports</a> </li> <li class="nav-item"> <a class="nav-link collapsed" href="">Business</a> </li> <li class="nav-item"> <a class="nav-link collapsed" href="">More</a> </li> <li class="nav-item"> <a class="nav-link collapsed" href="">Contact</a> </li> <li class="nav-item"> <a class="nav-link collapsed" href="">About Us</a> </li> </ul> </div> <div class="col-lg-2 col-md-2 text-end"> <ul class="d-flex list-unstyled"> <li class="nav-item"> <a class="nav-link collapsed" href="#"> English </a> </li> </ul> </div> </div> </div> <section class="second-menu-sec-row d-none d-lg-flex"> <div class="container"> </div> </section> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script> </body> </html>
.menu-two .dropnm button:focus { box-shadow: none; } .btn { box-shadow: none !important; outline: none !important; font-family: Arial, Helvetica, sans-serif; font-weight: 500; } .menu-two .dropnm button { box-shadow: none; outline: none; font-size: 14px; position: relative; top: 1px; display: flex; align-items: center; } .btn-check:active+.btn-secondary, .btn-check:checked+.btn-secondary, .btn-secondary.active, .btn-secondary:active, .show>.btn-secondary.dropdown-toggle { color: #212529; background-color: transparent; border-color: transparent; } .menu-two .dropdown-menu { padding: 0; margin: 0; border: none; background-color: transparent; } .menu-two .dropdown-menu li a { color: #fff; font-size: 14px; } .menu-two .btn-secondary { color: #212529; background-color: transparent; border-color: transparent; border-radius: 7px 7px 0px 0px; } .menu-two .btn-secondary:hover { color: #fff; background-color: #1E3A8A; border-color: #1E3A8A; border-radius: 7px 7px 0px 0px; } .nav-link:focus, .nav-link:hover { color: #fff; } .menu-two a { padding: 7px 7px; margin: 0px 3px !important; font-size: 14px; border-radius: 7px 7px 0px 0px; color: #fff; } .menu-two a:hover { background-color: #1E3A8A; color: #fff !important; border-radius: 7px 7px 0px 0px; } .list-unstyled { margin-bottom: 0; } .sub-menu li a { color: #fff; } .sub-menu li a:focus { color: #fff; } .fas { transform: rotate(90deg); transition: transform 0.2s; } .nav-link .fas { transform: rotate(180deg); transition: transform 0.2s; } .collapsed .fas { transform: rotate(0deg); transition: transform 0.2s; } .list-absolute { position: absolute; left: 0; background: #1E3988; width: 100%; border-top: 1px solid #ffffff59; } .nav-link { color: #1E1E1E; } .mrnu-first { background-color: #1E3988; } .mrnu-firs { background-color: #fff; } @media (max-width: 1200px) { .menu-two a { padding: 7px 3px; margin: 0px 3px !important; font-size: 11px; } .menu-two .dropdown button { font-size: 11px; } .menu-two .dropdown-menu li a { font-size: 11px; } }

Related: See More

Light Bootstrap Dashboard PRO React
Bootstrap 4 Footer Design
Bootstrap Dual Design Registration Form
Team Design Section with Pure CSS Effect

Questions / Comments: