bootstrap dropdown 3.3.7 submenu does not expand

Question

I pasted the code from here into my web application. It works except for the Service C dropdown submenu. I can't see Service C1 ... Service C5.

<ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="nav-label">Services</span> <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Service A</a></li>
                <li><a href="#">Service B</a></li>
                <li class="dropdown-submenu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="nav-label">Service C</span><span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Service C1</a></li>
                        <li><a href="#">Service C2</a></li>
                        <li><a href="#">Service C3</a></li>
                        <li><a href="#">Service C4</a></li>
                        <li><a href="#">Service C5</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

The page writes now:

The support for sub-menu was disabled in latest version of bootstrap. The option can be re-enabled by including a small CSS.

Do you know the CSS that is needed and where to put it?

I'm using bootstrap 3.3.7 and would like not to change this version.

provided link is bootstrap 3x but tagged bootstrap 4x. what you are using actually? — User863, Jul 25 '19 at 12:50
Possible duplicate of [Bootstrap dropdown sub menu missing](https://stackoverflow.com/questions/18023493/bootstrap-dropdown-sub-menu-missing) — User863, Jul 25 '19 at 13:10

ArunPratap · Accepted Answer · 2019-07-29T20:44:59.917

i did some changes see it

$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
</style>
</head>
<body>
   
<div class="container">                                      
 <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="nav-label">Services</span> <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Service A</a></li>
                <li><a href="#">Service B</a></li>
                <li class="dropdown-submenu">
                    <a class="test" href="#">Service C <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Service C1</a></li>
                        <li><a href="#">Service C2</a></li>
                        <li><a href="#">Service C3</a></li>
                        <li><a href="#">Service C4</a></li>
                        <li><a href="#">Service C5</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>



</body>
</html>

i just cloned the repo that you mentioned in comment and i pasted my code there and it's working fine look bellow i haven't updated anything

in your project

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <style>
        .dropdown-submenu {
            position: relative;
        }

       .dropdown-submenu .dropdown-menu {
                top: 0;
                left: 100%;
               margin-top: -1px;
        }
    </style>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="http://tech.trailmax.info" class="navbar-brand">tech.trailmax.info</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="nav-label">Services</span> <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Service A</a></li>
                            <li><a href="#">Service B</a></li>
                            <li class="dropdown-submenu">
                                <a class="test" href="#">Service C <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Service C1</a></li>
                                    <li><a href="#">Service C2</a></li>
                                    <li><a href="#">Service C3</a></li>
                                    <li><a href="#">Service C4</a></li>
                                    <li><a href="#">Service C5</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    <script>
        $(document).ready(function () {
            $('.dropdown-submenu a.test').on("click", function (e) {
                $(this).next('ul').toggle();
                e.stopPropagation();
                e.preventDefault();
            });
        });
    </script>
    @RenderSection("scripts", required: false)
</body>
</html>

look bellow image

I just don't understand, why it doesn't work in [this](https://github.com/trailmax/OwinADAuthentication) project. When I paste the code [here](https://github.com/trailmax/OwinADAuthentication/blob/master/ActiveDirectoryAuthentication/Views/Shared/_Layout.cshtml). I updated bootstrap to 3.3.7 (with 3.3.6 it doesn't work at all). Version of Jquery shouldn't be a problem, as I noticed. It's really mysterious that it does not work here. — xralf, Jul 29 '19 at 17:25
look your repo's attached layout page i just updated my answer — ArunPratap, Jul 29 '19 at 20:45
Thank you, it works now. It seems that the position of plays role. — xralf, Jul 30 '19 at 12:33

score 1 · Answer 2 · answered Jul 27 '19 at 13:24

.dropdown-menu has display:none property as you can see in bootstrap css file. You can add easily a display:block class like this:

$(document).ready(function(){
  $('.dropdown-toggle').on("click", function(e){
    $(this).next('.dropdown-menu').toggleClass("opened");
  });
});

.opened {
  display: block !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#about">About</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="nav-label">Services</span> <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Service A</a></li>
      <li><a href="#">Service B</a></li>
      <li class="dropdown-submenu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="nav-label">Service C</span><span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Service C1</a></li>
          <li><a href="#">Service C2</a></li>
          <li><a href="#">Service C3</a></li>
          <li><a href="#">Service C4</a></li>
          <li><a href="#">Service C5</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Thanks a lot. I prefer the first solution though, because after I click somewhere on the page, the drop-down tree will disappear. — xralf, Jul 27 '19 at 13:38

bootstrap dropdown 3.3.7 submenu does not expand

2 Answers2