Multi Level Bootstrap DropDown menu with Submenu using HTML and CSS

Last Reply 11 months ago By dharmendr

Posted 11 months ago

Hi! I want use submenu for Structure institut and Header institut. When I click Header institut show Library and Scientific consul in submenu else click Structure institut show Since and Monitoring. Output result:

Main page

Control institut

 

 

Structure institut

Since

 

 

Monitoring

 

Header institut

Library

 

 

Scientific consul

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" >
  <div class="row">
    <div class="col-md-12">
      <nav class="navbar navbar-default " role="navigation" style="z-index: 1000; background-color: #325c94;">
        <div class="container" >
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left" style="z-index: 1000;">
              <li class="dropdown">
                <a href="#" style="color: white;">Main page</a>
                <ul>
                   
                </ul>
              </li>      
              <li class="dropdown">
                <a href="#" style="color: white;" class="dropdown-toggle" data-toggle="dropdown">Control institut <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Structure institut</li>
                <li><a href="#">Header institut</a></li>
              </ul></li>
             </ul>
          </div>
        </div>     
      </nav>
    </div>
  </div>
</div>
</body>
</html>

Who is you can help me?

Posted 11 months ago

Hi PRA,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/jscript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/jscript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        .dropdown-submenu
        {
            position: relative;
        }
        
        .dropdown-submenu .dropdown-menu
        {
            top: 0;
            left: 100%;
            margin-top: -1px;
        }
    </style>
    <script type="text/jscript">
        $(document).ready(function () {
            $('.dropdown-submenu a.test').on("click", function (e) {
                $(this).next('ul').toggle();
                e.stopPropagation();
                e.preventDefault();
            });
        });
    </script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <nav class="navbar navbar-default " role="navigation" style="z-index: 1000; background-color: #325c94;">
                    <div class="container" >
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                          <span class="sr-only"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                      </button>
                      <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav navbar-left" style="z-index: 1000;">
                          <li class="dropdown">
                            <a href="#" style="color: white;">Main page</a>
                            <ul>
                    
                            </ul>
                          </li>     
                          <li class="dropdown">
                            <a href="#" style="color: white;" class="dropdown-toggle" data-toggle="dropdown">Control institut <b class="caret"></b></a>
                             <ul class="dropdown-menu">
                                <li class="dropdown-submenu"><a class="test" tabindex="-1" href="#">Structure institut<span
                                    class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a tabindex="-1" href="#">Since</a></li>
                                        <li><a tabindex="-1" href="#">Monitoring</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown-submenu"><a class="test" tabindex="-1" href="#">Header institut<span
                                    class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a tabindex="-1" href="#">Library</a></li>
                                        <li><a tabindex="-1" href="#">Scientific consul</a></li>
                                    </ul>
                                </li>
                            </ul>
                          </li>
                         </ul>
                      </div>
                    </div>    
              </nav>
            </div>
        </div>
    </div>
</body>
</html>

Demo