"Responsive Dropdown Menu Bar "
Bootstrap 4.1.1 Snippet by Pawan Pandey

<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" dir="ltr"> <head> <meta charset="utf-8"> <title>Responsive Drop-down Menu Bar</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <div class="logo">Code4education</div> <label for="btn" class="icon"> <span class="fas fa-bars"></span> </label> <input type="checkbox" id="btn"> <ul> <li><a href="#">Home</a></li> <li> <label for="btn-1" class="show">Features +</label> <a href="#">Features</a> <input type="checkbox" id="btn-1"> <ul> <li><a href="#">Pages</a></li> <li><a href="#">Members</a></li> <li><a href="#">Offers</a></li> </ul> </li> <li> <label for="btn-2" class="show">Services +</label> <a href="#">Services</a> <input type="checkbox" id="btn-2"> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">App Design</a></li> <li> <label for="btn-3" class="show">More +</label> <a href="#">More <span class="fa fa-plus"></span></a> <input type="checkbox" id="btn-3"> <ul> <li><a href="#">Submenu-1</a></li> <li><a href="#">Submenu-2</a></li> <li><a href="#">Submenu-3</a></li> </ul> </li> </ul> </li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div class="content"></div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $('.icon').click(function(){ $('span').toggleClass('cancel'); }) </script> </body> </html>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); *{ margin: 0; padding: 0; user-select: none; box-sizing: border-box; font-family: 'Poppins', sans-serif; } :root{ --yellow-color:#ffc947; --black-color:#1b1b1b; --white-color:#fff; } nav{ background:var(--black-color); } nav:after{ content:''; clear:both; display:table; } nav .logo{ float:left; color:var(--white-color); font-size: 27px; font-weight: 600; line-height: 70px; padding-left: 60px; } nav ul{ float:right; margin-right:40px; list-style: none; position:relative; } nav ul li{ float:left; display:inline-block; background:var(--black-color); margin:0 5px; } nav ul li a{ color:var(--white-color); line-height: 70px; text-decoration: none; font-size: 18px; padding:8px 15px; transition: 0.3s all ease; } nav ul li a:hover{ color:var(--yellow-color); border-radius: 5px; box-shadow: 0 0 5px var(--yellow-color), 0 0 10px var(--yellow-color); } nav ul ul li a:hover{ box-shadow: none; } nav ul ul{ position:absolute; top:90px; z-index: 100; border-top:3px solid var(--yellow-color); opacity:0; visibility:hidden; transition: top .3s; } nav ul ul ul{ border-top:none; } nav ul li:hover > ul{ top:70px; opacity:1; visibility:visible; } nav ul ul li{ position:relative; margin:0px; width:150px; float:none; display:list-item; border-bottom:1px solid rgba(0,0,0,0.3); } nav ul ul li a{ line-height: 50px; } nav ul ul ul li{ position:relative; top:-60px; left:150px; } .show,.icon,input{ display:none; } .fa-plus{ font-size:15px; margin-left:40px; } .content{ position:relative; } .content::before{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; background-image:url('images/bg.jpg'); background-repeat:no-repeat; background-position:center; background-size: cover; width:100%; height:calc(100vh - 70px); } .content::after{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:calc(100vh - 70px); background-color: rgba(0,0,0,.50); } @media all and (max-width:968px){ nav ul{ margin-right:0px; float:left; } nav .logo{ padding-left:30px; width:100%; } .show + a, ul{ display:none; } nav ul li, nav ul ul li{ display:block; width:100%; } nav ul li a:hover{ box-shadow: none; } .show{ display:block; color:var(--white-color); font-size: 18px; padding:0 12px; line-height: 70px; cursor:pointer; } .show:hover{ color:var(--yellow-color); } .icon{ display:block; color:var(--white-color); position:absolute; top:0; right:40px; line-height: 70px; cursor:pointer; font-size: 25px; } nav ul ul{ top:70px; border-top:0px; float:none; position:static; display:none; opacity:1; visibility:visible; } nav ul ul a{ padding-left: 40px; } nav ul ul ul a{ padding-left: 80px; } nav ul ul ul li{ position:static; } [id^=btn]:checked + ul{ display:block; } nav ul ul li{ border-bottom:0px; } span.cancel:before{ content:'\f00d'; } }

Related: See More

Questions / Comments: