<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 ----------> <div class="container"> <div class="row"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title "> <a href="index.php"> Home </a> </h4> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title "> <a href="aboutus.php"> About Us </a> </h4> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title title"> <a class=" collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false"> Products </a> </h4> </div> <!--/.panel-heading --> <div id="collapseTwo" class="panel-collapse collapse" aria-expanded="true" style=""> <div class="panel-body"> <!-- nested --> <div class="panel-group" id="nested"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title title"> <a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseOne"> Mars </a> </h4> </div> <!--/.panel-heading --> <div id="nested-collapseOne" class="panel-collapse collapse"> <div class="panel-body nested-menu"> <li><a href="mars-toilet.php">Mars Toilet</a></li> <li><a href="mars-urinal.php">Mars Urinal</a></li> <li><a href="mars-shower.php">Mars Shower</a></li> </div> <!--/.panel-body --> </div> <!--/.panel-collapse --> </div> <!-- /.panel --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title title"> <a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseTwo"> Naptune </a> </h4> </div> <!--/.panel-heading --> <div id="nested-collapseTwo" class="panel-collapse collapse"> <div class="panel-body nested-menu"> <li><a href="neptune-toilet.php">Naptune Toilet</a></li> <li><a href="neptune-urinal.php">Naptune Urinal</a></li> <li><a href="neptune-shower.php">Naptune Shower</a></li> </div> <!--/.panel-body --> </div> <!--/.panel-collapse --> </div> <!-- /.panel --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title title"> <a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseThree"> Saturn </a> </h4> </div> <!--/.panel-heading --> <div id="nested-collapseThree" class="panel-collapse collapse"> <div class="panel-body nested-menu"> <li><a href="saturn-toilet.php">Saturn Toilet</a></li> <li><a href="saturn-urinal.php">Saturn Urinal</a></li> <li><a href="saturn-shower.php">Saturn Shower</a></li> </div> <!--/.panel-body --> </div> <!--/.panel-collapse --> </div> <!-- /.panel --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title title"> <a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseFour"> Jupiter </a> </h4> </div> <!--/.panel-heading --> <div id="nested-collapseFour" class="panel-collapse collapse"> <div class="panel-body nested-menu"> <li><a href="jupiter-toilet.php">Jupiter Toilet</a></li> <li><a href="jupiter-urinal.php">Jupiter Urinal</a></li> <li><a href="jupiter-shower.php">Jupiter Shower</a></li> </div> <!--/.panel-body --> </div> <!--/.panel-collapse --> </div> <!-- /.panel --> </div> <!-- /.panel-group --> <!-- nested --> </div> <!--/.panel-body --> </div> <!--/.panel-collapse --> </div> <!-- /.panel --> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#nonveg" aria-expanded="false"> Services </a> </h4> </div> <!--/.panel-heading --> <div id="nonveg" class="panel-collapse collapse" aria-expanded="false"> <div class="panel-body nested-menu"> <!-- nested --> <li><a href="cleaning-services.php">Cleaning Services</a></li> <li><a href="hand-wash-system.php">Hand Wash System</a></li> <!-- /.panel-group --> <!-- nested --> </div> <!--/.panel-body --> </div> <!--/.panel-collapse --> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title "> <a href="contactus.php"> Contact Us </a> </h4> </div> </div> </div> </div> </div>

#accordion .panel{ border: none; border-radius: 0; box-shadow: none; margin-bottom: -5px; } #accordion .panel-heading{ padding: 0; border: none; border-radius: 0; } #accordion .panel-title a{ display: block; padding: 15px 70px 15px 5px; background: #fff; /* font-size: 18px; font-weight: 700;*/ letter-spacing: 1px; color: #d21d54; border-bottom: 1px solid #d1d1d1; position: relative; font-size: 14px; font-weight: 500; } #accordion .title a.collapsed{ color: #1d2e3b; } #accordion .title a.collapsed:hover{ color: #d21d54; } #accordion .title a:before, #accordion .title a:after{ content: ""; width: 3px; height: 10px; background: #d21d54; font-size: 15px; position: absolute; top: 20px; right: 35px; transform: rotate(-45deg); transition: all 0.3s ease-in-out 0s; } #accordion .title a:after{ right: 29px; transform: rotate(45deg); } #accordion .title a.collapsed:before{ transform: rotate(45deg); background: #1d2e3b; } #accordion .title a.collapsed:after{ transform: rotate(-45deg); background: #1d2e3b; } #accordion .title a.collapsed:hover:before, #accordion .title a.collapsed:hover:after{ background: #d21d54; } #accordion .panel-body{ padding: 10px 10px; background: #fff; border-top: none; font-size: 15px; color: #000; line-height: 25px; }