To modify a css to enable child-menu/submenu to the existing dropmenu

Question

Since I'm not able to modify the present code to my utility, I may request a help to modify the following css code to enable a child-menu to the existing sub-menu. To say, by using the given code I may get: dropdown -> dropdown-menu. Now, I want: dropdown -> dropdown-menu -> dropdown-menu-child. somenone help...please!

.navbar-default {
    background-color: #990000;
    border-color: #990000;
}

.custom_nav li a:hover {
    border-color: #FFAE00;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #fff;
    color: #990000;
    border-color: #FFAE00;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: #fff;
    color: #990000;
    border-color: #FFAE00;
}

.navbar-nav > li > .dropdown-menu {
    margin-top: 1px;
    background-color: #ffa500;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background-color: #fff;
    color: #990000;
    border-color: #FFAE00;
    padding-left: 20px;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #fff;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #fcc259;
}

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="navbar-default">
<ul class="nav navbar-nav custom_nav">
    <li class=""><a href="index.php">Home</a></li>

    <li class="dropdown"><a href="#" class="" data-toggle="dropdown" role="button" aria-expanded="false">dropdown</a>

        <ul class="dropdown-menu" role="menu">
            <li><a href="#">dropdown-menu</a></li>
        </ul>
    </li>
</ul>
</div>
</body>
</html>

It isn't clear what you are trying to accomplish, and your question lacks a reproducible example of the behavior you are currently observing. I've updated your snippet to combine the HMTL and CSS, and removed the unused CSS, however when I run it there is no "dropdown" behavior present. My guess is that you are also using a javascript library to introduce the dropdown behavior. So the first thing you need to do is identify that library. If you can update the snippet to reproduce the existing drop down behavior, it *might* be possible to add nested sub-menu functionality. — Paul Wheeler, Dec 05 '19 at 00:45
For tips on how to ask better questions in the future see: https://stackoverflow.com/help/minimal-reproducible-example — Paul Wheeler, Dec 05 '19 at 00:46
It looks like you're using bootstrapjs, so I added that to the snippet, now there is a reproducible drop down control. — Paul Wheeler, Dec 05 '19 at 01:00
Thank you Paul Wheeler, thank you so much....i used your help in coding my page navbar and I'm almost there! Still....what I exactly desired is the next step/level. How the dropdown-menu (which is the sub-menu of dropdown) can have its child-menu. So to say: submenu for dropdown-menu. Please help — Bobsweb, Dec 05 '19 at 13:28
If you read and understand the answer here: https://stackoverflow.com/questions/44467377/bootstrap-4-multilevel-dropdown-inside-navigation then the solution to your question is straightforward. However, since I went to the trouble of demonstrating that, I've posted an answer with a working snippet. I also added some comments to the javascript to make it clear what it is doing. — Paul Wheeler, Dec 05 '19 at 21:05

score 0 · Answer 1 · answered Dec 05 '19 at 21:03

Here is a version of your snippet with a submenu.

// This javascript handler is necessary to implement the submenu dropdown functionality
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  // when the sub-menu container is clicked...
  if (!$(this).next().hasClass('show')) {
    // if the submenu list is not shown, collapse any other expanded submenus.
    $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
  }
  
  // toggle the visibility of the submenu list
  var $subMenu = $(this).next('.dropdown-menu');
  $subMenu.toggleClass('show');

  // This javascript handler will automatically hide visible submenus when the parent dropdown is closed (without this an visible submenu will remain visible when the parent menu is closed and re-opened.
  $(this).parents('li.dropdown.show').on('hidden.bs.dropdown', function(e) {
    $('.dropdown-submenu .show').removeClass('show');
  });

  // prevent the default behavior, which is to close the parent dropdown
  return false;
});

.navbar-default {
    background-color: #990000;
    border-color: #990000;
}

.custom_nav li a:hover {
    border-color: #FFAE00;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: #fff;
    color: #990000;
    border-color: #FFAE00;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: #fff;
    color: #990000;
    border-color: #FFAE00;
}

.navbar-nav > li > .dropdown-menu {
    margin-top: 1px;
    background-color: #ffa500;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background-color: #fff;
    color: #990000;
    border-color: #FFAE00;
    padding-left: 20px;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #fff;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #fcc259;
}

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="navbar-default">
<ul class="nav navbar-nav custom_nav">
    <li class=""><a href="index.php">Home</a></li>

    <li class="dropdown"><a href="#" class="" data-toggle="dropdown" role="button" aria-expanded="false">dropdown</a>

        <ul class="dropdown-menu" role="menu">
            <li class="dropdown-item"><a href="#">dropdown-menu item #1</a></li>
            <li class="dropdown-item"><a href="#">dropdown-menu item #2</a></li>
            <li class="dropdown-submenu">
              <a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Submenu action</a></li>
                <li><a class="dropdown-item" href="#">Another submenu action</a></li>
              </ul>
            </li>
        </ul>
    </li>
</ul>
</div>
</body>
</html>

To modify a css to enable child-menu/submenu to the existing dropmenu

1 Answers1