My rewrite to make sure when you close the parent, all the childs is close too:

$(document).ready( function() {
$("li.dropdown-submenu > a").on("click", function(){
$("li.dropdown-submenu").removeClass("open");
if($(this).parent("li.dropdown-submenu").hasClass("in-use")){
$(this).parents("li.dropdown-submenu").addClass("open");
$(this).parent("li.dropdown-submenu").removeClass("open");
$(this).parent("li.dropdown-submenu").removeClass("in-use");
$(this).siblings('ul.dropdown-menu').children("li.dropdown-submenu").removeClass("open");
$(this).siblings('ul.dropdown-menu').children("li.dropdown-submenu").removeClass("in-use");
} else {
$(this).parents("li.dropdown-submenu").addClass("open");
$(this).parents("li.dropdown-submenu").addClass("in-use");
}
return false;
});
});

How can I use the dropdown links as a clickable link to open the page?
I want to open page onClick an onOver the dropdown should appear

Hola, estoy comenzando con esto y me estoy teniendo porblemas para agregar el submenu, el codigo del css en que archivo lo agregaria? Lo que estoy haciendo es soltar el codigo al final del .css pero no me esta funcinando, hay que escribirlo de alguna manera? gracias

.dropdown-submenu {

position: relative;

}

.dropdown-submenu>.dropdown-menu {

top: 0;

left: 100%;

margin-top: -6px;

margin-left: -1px;

-webkit-border-radius: 0 6px 6px 6px;

-moz-border-radius: 0 6px 6px;

border-radius: 0 6px 6px 6px;

}

.dropdown-submenu.active>.dropdown-menu {

display: block;

}

.dropdown-submenu>a:after {

display: block;

content: " ";

float: right;

width: 0;

height: 0;

border-color: transparent;

border-style: solid;

border-width: 5px 0 5px 5px;

border-left-color: #ccc;

margin-top: 5px;

margin-right: -10px;

}

.dropdown-submenu.active>a:after {

border-left-color: #fff;

}

.dropdown-submenu.pull-left {

float: none;

}

.dropdown-submenu.pull-left>.dropdown-menu {

left: -100%;

margin-left: 10px;

-webkit-border-radius: 6px 0 6px 6px;

-moz-border-radius: 6px 0 6px 6px;

border-radius: 6px 0 6px 6px;

}

Does anyone have a fully patched version of this? It's difficult to follow all the suggested changes. I tried some of them but got worse results than my original problem.

Currently I am seeing that when I put an actual URL in the anchor tags within an li tag, only the links in the first level menus work. The links are clearly visible in the 2nd and 3rd level menu items, but when you click on them nothing happens. As someone mentioned below, right clicking on them and opening them does work, so the links are valid. His suggested code for WordPress doesn't help... I am not on WordPress.

Really, if I can get this to work it would be perfect. We are stuck on Bootstrap 4 for a while, and it's very difficult to find examples of menus with flyouts for Bootstrap 4.

Thanks

Does anyone have a fully patched version of this? It's difficult to follow all the suggested changes. I tried some of them but got worse results than my original problem.

Currently I am seeing that when I put an actual URL in the anchor tags within an li tag, only the links in the first level menus work. The links are clearly visible in the 2nd and 3rd level menu items, but when you click on them nothing happens. As someone mentioned below, right clicking on them and opening them does work, so the links are valid. His suggested code for WordPress doesn't help... I am not on WordPress.

Really, if I can get this to work it would be perfect. We are stuck on Bootstrap 4 for a while, and it's very difficult to find examples of menus with flyouts for Bootstrap 4.

Thanks

Does anyone have a fully patched version of this? It's difficult to follow all the suggested changes. I tried some of them but got worse results than my original problem.

Currently I am seeing that when I put an actual URL in the anchor tags within an li tag, only the links in the first level menus work. The links are clearly visible in the 2nd and 3rd level menu items, but when you click on them nothing happens. As someone mentioned below, right clicking on them and opening them does work, so the links are valid. His suggested code for WordPress doesn't help... I am not on WordPress.

Really, if I can get this to work it would be perfect. We are stuck on Bootstrap 4 for a while, and it's very difficult to find examples of menus with flyouts for Bootstrap 4.

Thanks

Does anyone have a fully patched version of this? It's difficult to follow all the suggested changes. I tried some of them but got worse results than my original problem.

Currently I am seeing that when I put an actual URL in the anchor tags within an li tag, only the links in the first level menus work. The links are clearly visible in the 2nd and 3rd level menu items, but when you click on them nothing happens. As someone mentioned below, right clicking on them and opening them does work, so the links are valid. His suggested code for WordPress doesn't help... I am not on WordPress.

Really, if I can get this to work it would be perfect. We are stuck on Bootstrap 4 for a while, and it's very difficult to find examples of menus with flyouts for Bootstrap 4.

Thanks

Does anyone have a fully patched version of this? It's difficult to follow all the suggested changes. I tried some of them but got worse results than my original problem.

Currently I am seeing that when I put an actual URL in the anchor tags within an li tag, only the links in the first level menus work. The links are clearly visible in the 2nd and 3rd level menu items, but when you click on them nothing happens. As someone mentioned below, right clicking on them and opening them does work, so the links are valid. His suggested code for WordPress doesn't help... I am not on WordPress.

Really, if I can get this to work it would be perfect. We are stuck on Bootstrap 4 for a while, and it's very difficult to find examples of menus with flyouts for Bootstrap 4.

Thanks

Does anyone have a fully patched version of this? It's difficult to follow all the suggested changes. I tried some of them but got worse results than my original problem.

Currently I am seeing that when I put an actual URL in the anchor tags within an li tag, only the links in the first level menus work. The links are clearly visible in the 2nd and 3rd level menu items, but when you click on them nothing happens. As someone mentioned below, right clicking on them and opening them does work, so the links are valid. His suggested code for WordPress doesn't help... I am not on WordPress.

Really, if I can get this to work it would be perfect. We are stuck on Bootstrap 4 for a while, and it's very difficult to find examples of menus with flyouts for Bootstrap 4.

Thanks

Does anyone have a fully patched version of this? It's difficult to follow all the suggested changes. I tried some of them but got worse results than my original problem.

Currently I am seeing that when I put an actual URL in the anchor tags within an li tag, only the links in the first level menus work. The links are clearly visible in the 2nd and 3rd level menu items, but when you click on them nothing happens. As someone mentioned below, right clicking on them and opening them does work, so the links are valid. His suggested code for WordPress doesn't help... I am not on WordPress.

Really, if I can get this to work it would be perfect. We are stuck on Bootstrap 4 for a while, and it's very difficult to find examples of menus with flyouts for Bootstrap 4.

Thanks

Hello

Your Bootstrap 4 Navbar is very fine.

I have some difficulty in changing the different colors, text, text background.

thank you for your indications

Yves Accard

to make the link open in new page, slight changes on the li item (laravel blade template) to include new class named as 'nestedmenu' :

then in scripts :

e.preventDefault();

var url = $(this).attr('href');

window.open(url, '_blank');

});

links with this code doesn't work.

There is a issue where if you try to put the dropdown submenu on the right it overlaps the text so set the class to navbar-right instead of just having it in the center and you will see it does not do it here but will for sure do it on your site.

If anyone runs into the solution for this please do help.

if your try to add the Submenus on the navbar-right class all the links go under the text no matter what. Anyone got a fix?....
I would really light to put the dropdown sub menu on the right side not in the center.

While using the code, right click on the submenu works but the left
click does not due to the data toggle and drop down classes for submenu
anchor links,

Add the below code when using bootstrap with WP, and it works...

$(document).ready(function(){

$("ul li:has(ul)>a ").addClass("dropdown-toggle");

$("ul li:has(ul)>a ").attr("data-toggle","dropdown");

$("ul li:has(ul) ul ").addClass("dropdown-menu multi-level");

$("ul ul li:has(ul) ").addClass("dropdown-submenu");

});

when i add some more links on the navigation and open the sub menu it will goose under the browser on the right side

add scroll on overflow ..

Does not work

To use on mobile, or with a click, juste add this JS :

$(document).ready( function() {
$("li.dropdown-submenu").on("click", function(){
$("li.dropdown-submenu").removeClass("active");
$(this).addClass("active");
return false;
});
});

And change the css ":hover" by

.dropdown-submenu.active>.dropdown-menu {
display: block;
}

.dropdown-submenu.active>a:after {
border-left-color: #fff;
}

I don't understand where this should be inserted. My apologies i'm new to web design and I hope someone can help and explain it to me.

There is a problem with the line "return false" all link are disabled ... help with that problem

I changed the script to this:
$(document).ready( function() {
$("li.dropdown-submenu > a").on("click", function(){
$("li.dropdown-submenu").removeClass("active");
$(this).parent().addClass("active");
return false;
});
});

And the submenu links work again.

Mobile click on a sub-menu opens, when you release the button, the menu closes.

I can't access anything below the first level of dropdown on my phone, any time I click "Dropdown" the "Menu 1" closes. Is there a fix for this?

yess check the first comment ... and follow the instructions carefully :D