Tree view (pure HTML/CSS/JS) problem in js - javascript

I have a question about Tree view in pure HTML/CSS/JS files.
I can make Tree view with HTML/CSS successfully and get help from w3school, you can see my code here:
html file:
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
})
}
ul, .menu {
list-style-type: none;
}
.menu {
margin: 0;
padding: 0;
}
.menu a {
text-decoration: none;
}
.caret {
cursor: pointer;
user-select: none; /* Prevent text selection */
}
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
.caret-down::before {
transform: rotate(90deg);
}
.nested {
display: none;
}
.active {
display: block;
}
<ul class="menu">
<li><i class="fa fa-home"></i> Home</li>
<li class="caret">
<i class="fa fa-graduation-cap"></i> Tutorial
<ul class="nested">
<li class="caret">
<i class="fa fa-chrome"></i> Web Development
<ul class="nested">
<li>Blog Project</li>
<li>CMS Project</li>
<li>Shop Project</li>
<li>E-learning Project</li>
<li>Automasion Project</li>
</ul>
</li>
<li class="caret">
<i class="fa fa-server"></i> Network
<ul class="nested">
<li>Comptia</li>
<li>Windows</li>
<li>Linux</li>
<li>CISCO</li>
<li>MicroTik</li>
<li>Virtualization</li>
<li>Security</li>
</ul>
</li>
<li class="caret">
<i class="fa fa-microchip"></i> IOT
<ul class="nested">
<li>Concept</li>
<li>Electronic</li>
<li>Sensor</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-archive"></i> Projects</li>
<li><i class="fa fa-info-circle"></i> Resume</li>
<li><i class="fa fa-envelope-open"></i> Contact me</li>
But I have a problem in cascading (Open/close) them in js file, first time that I click on tutorials, that list will open without any problems, but after that when I click on one of the nested lists in it (web development) all of the tree from tutorials is closing.


First thing your JS is correct, this this.parentElement.querySelector(".nested") alwayse targeting the first <ul>, just try to remove caret class from <li> and put it inside <a>, that's main that the click will be binded to <a> instead of<li>. or put it inside <span> as you want, it works as well. See the code snippet below :
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
})
}
ul, .menu {
list-style-type: none;
}
.menu {
margin: 0;
padding: 0;
}
.menu a {
text-decoration: none;
}
.caret {
cursor: pointer;
user-select: none; /* Prevent text selection */
}
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
.caret-down::before {
transform: rotate(90deg);
}
.nested {
display: none;
}
.active {
display: block;
}
<ul class="menu">
<li><i class="fa fa-home"></i> Home</li>
<li>
<a class="caret" href="javascript:void(0);"><i class="fa fa-graduation-cap"></i> Tutorial</a>
<ul class="nested">
<li>
<a class="caret" href="javascript:void(0);"><i class="fa fa-chrome"></i> Web Development</a>
<ul class="nested">
<li>Blog Project</li>
<li>CMS Project</li>
<li>Shop Project</li>
<li>E-learning Project</li>
<li>Automasion Project</li>
</ul>
</li>
<li>
<a class="caret" href="javascript:void(0);"><i class="fa fa-server"></i> Network</a>
<ul class="nested">
<li>Comptia</li>
<li>Windows</li>
<li>Linux</li>
<li>CISCO</li>
<li>MicroTik</li>
<li>Virtualization</li>
<li>Security</li>
</ul>
</li>
<li>
<a class="caret" href="javascript:void(0);"><i class="fa fa-microchip"></i> IOT</a>
<ul class="nested">
<li>Concept</li>
<li>Electronic</li>
<li>Sensor</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-archive"></i> Projects</li>
<li><i class="fa fa-info-circle"></i> Resume</li>
<li><i class="fa fa-envelope-open"></i> Contact me</li>


The problem here is that you are binding the event on ul element. when the click happens it took this.parentElement (this is the element which click was binded on) so it is higher html level then you need. Place caret class on a element inside li. And the next problem is that they are using span element and you are using a element which is doing redirection by default so stopPropagation is needed as well.

Related

How do I toggle sub menu items on a navigation?

I am working on an accessible navigation and would like to toggle submenu items on click using the same click handler but their closest respective sub-menu-items. (Any accessibility help is a bonus.) Is the only way to do this by setting an ID? If so, I would like this to be dynamic in the JS where the data-id is not hardcoded.
function handleSubmenuToggle() {
console.log('click');
document.querySelector('.sub-menu-items').style.display = 'block';
}
.nav-menu-container {
background: black;
color: white;
font-size: 0.875rem;
padding: 1.3125rem 1.875rem;
}
.menu-item {
display: inline;
padding: 0 0.75rem;
position: relative;
}
.menu-item button {
background-color: transparent;
border: none;
color: white;
}
.sub-menu-items {
background: white;
display: none;
left: -25px;
min-width: 183px;
padding: 10px 0;
position: absolute;
top: 40px;
}
.sub-menu-items.show {
display: block !important;
}
.sub-menu-items:after {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid white;
content: " ";
position: absolute;
top: -10px;
left: 42%;
}
.sub-menu-items a {
color: black;
text-decoration: none;
padding: .5rem 1rem;
display: block;
}
.sub-menu-items a:hover {
background-color: lightgray;
}
<header>
<nav aria-label="Empower Reservation Navigation" class="nav-menu-container">
<ul class="menu-items">
<li class="menu-item slds-is-relative">
<button aria-label='Toggle Button' aria-pressed='pressed' onclick="handleSubmenuToggle();">Menu Item 1 <i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
Sub Menu Item
</li>
<li>
Sub Menu Item 2
</li>
<li>
Sub Menu Item 3
</li>
<li>
Sub Menu Item 4
</li>
</ul>
</li>
<li class="menu-item slds-is-relative">
<button aria-label='Toggle Button' aria-pressed='pressed' onclick="handleSubmenuToggle()">Menu Item 2<i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
Sub Menu Item
</li>
<li>
Sub Menu Item 2
</li>
<li>
Sub Menu Item 3
</li>
<li>
Sub Menu Item 4
</li>
</ul>
</li>
<li class="menu-item slds-is-relative">
<button aria-label='Toggle Button' aria-pressed='pressed'>Tools <i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
Sub Menu Item
</li>
<li>
Sub Menu Item 2
</li>
<li>
Sub Menu Item 3
</li>
<li>
Sub Menu Item 4
</li>
</ul>
</li>
<li class="menu-item slds-is-relative">
<button aria-label='Toggle Button' aria-pressed='pressed'>Contact [Name] <i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
Sub Menu Item
</li>
<li>
Sub Menu Item 2
</li>
<li>
Sub Menu Item 3
</li>
<li>
Sub Menu Item 4
</li>
</ul>
</li>
</ul>
</nav>
</header>
Thanks in advance!
https://codepen.io/fawn-marie/pen/GRBobNX?editors=1111

W3 has some great examples how to implement WCAG features with ARIA attributes. A specific example could be found here: Navigation Menubar Example.
Give the <button> element two new aria attributes
aria-haspopup to indicate that there is a flyout submenu;
aria-expanded to provide information if the flyout is visible or not
By doing this you're giving the <button> the control over the state of the submenu. aria-expanded will now tell you the current state of the submenu. You can manipulate this state through JavaScript by setting the attribute value with Element.setAttribute.
Then you can open and close your submenu by styling the submenu based on the aria-expanded value. Since the button is a sibling of the submenu, you can use the sibling selector + to select the submenu whenever the button has a certain attribute, like this.
ul.submenu {
display: none;
}
button[aria-expanded="true"] + ul.submenu {
display: block;
}
The cool thing about this is that the <button> is the only authority over the submenu. From here you only have to listen for clicks on the button to toggle the aria-expanded state. The rest will be governed by CSS.
I suggest you look at the W3 link as it shows more attributes that you should use in this kind of structure to improve accessibility.
const subMenuToggles = document.querySelectorAll('.sub-menu-toggle');
document.addEventListener('click', event => {
const subMenuToggle = event.target.closest('.sub-menu-toggle');
if (subMenuToggle === null) {
return;
}
for (const toggle of subMenuToggles) {
if (toggle.hasAttribute('aria-haspopup')) {
toggle.setAttribute('aria-expanded', 'false');
}
}
if (!subMenuToggle.hasAttribute('aria-haspopup')) {
return;
}
if (subMenuToggle.getAttribute('aria-expanded') === 'true') {
subMenuToggle.setAttribute('aria-expanded', 'false');
} else {
subMenuToggle.setAttribute('aria-expanded', 'true');
}
});
.nav-menu-container {
background: black;
color: white;
font-size: 0.875rem;
padding: 1.3125rem 1.875rem;
}
.menu-item {
display: inline;
padding: 0 0.75rem;
position: relative;
}
.menu-item button {
background-color: transparent;
border: none;
color: white;
}
.sub-menu-items {
display: none;
background: white;
left: -25px;
min-width: 183px;
padding: 10px 0;
position: absolute;
top: 40px;
}
.sub-menu-toggle[aria-expanded="true"] + .sub-menu-items {
display: block;
}
.sub-menu-items:after {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid white;
content: " ";
position: absolute;
top: -10px;
left: 42%;
}
.sub-menu-items a {
color: black;
text-decoration: none;
padding: .5rem 1rem;
display: block;
}
.sub-menu-items a:hover {
background-color: lightgray;
}
<header>
<nav aria-label="Empower Reservation Navigation" class="nav-menu-container">
<ul class="menu-items">
<li class="menu-item slds-is-relative">
<button class="sub-menu-toggle" aria-label='Toggle Button' aria-haspopup="true" aria-expanded="false">Menu Item 1 <i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
Sub Menu Item
</li>
<li>
Sub Menu Item 2
</li>
<li>
Sub Menu Item 3
</li>
<li>
Sub Menu Item 4
</li>
</ul>
</li>
<li class="menu-item slds-is-relative">
<button class="sub-menu-toggle" aria-label='Toggle Button' aria-haspopup="true" aria-expanded="false">Menu Item 2<i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
Sub Menu Item
</li>
<li>
Sub Menu Item 2
</li>
<li>
Sub Menu Item 3
</li>
<li>
Sub Menu Item 4
</li>
</ul>
</li>
<li class="menu-item slds-is-relative">
<button class="sub-menu-toggle" aria-label='Toggle Button' aria-haspopup="true" aria-expanded="false">Tools <i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
Sub Menu Item
</li>
<li>
Sub Menu Item 2
</li>
<li>
Sub Menu Item 3
</li>
<li>
Sub Menu Item 4
</li>
</ul>
</li>
<li class="menu-item slds-is-relative">
<button aria-label='Toggle Button' aria-pressed='pressed'>Contact [Name] <i class="fa-solid fa-chevron-down"></i></button>
<ul class="sub-menu-items">
<li>
Sub Menu Item
</li>
<li>
Sub Menu Item 2
</li>
<li>
Sub Menu Item 3
</li>
<li>
Sub Menu Item 4
</li>
</ul>
</li>
</ul>
</nav>
</header>

classLList.toggle property not working with getElementsByClassName

My HTML Code is for navigation bar:
<Nav>
<ul>
<li onclick="showDropDownMenu('dropdown-menu')" class="dropdown nav-icon">
<span class="fa fa-fw fa-bars"></span>
<ul class="dropdown-menu">
<li>Home</li>
<li>Games</li>
<li>Workout</li>
<li>Yoga</li>
<li>About Us</li>
</ul>
</li>
<li class="home nav-icon"><i class="fa fa-fw fa-home"></i></li>
<li class="active nav-btn">Home</li>
<li class="nav-btn">Games</li>
<li class="nav-btn">Stay Fit</li>
<li class="nav-btn">About Us</li>
</ul>
<form class="nav-search">
<input type="search" name="Search" class="text-area" placeholder="Search...">
<span class="fa fa-fw fa-search search-btn"></span>
</form>
</Nav>
And my css for second ul element
nav .dropdown ul{
display: none;
position: absolute;
background: black;
min-width: 150px;
left: 0;
box-shadow: 5px 8px 16px 0px rgba(0,0,0,0.5);
z-index: 1;
transition: visibility 0.3s linear;
}
.show{
display: block;
}
My Js code is
showDropDownMenu.js
function showDropDownMenu(className)
{
document.getElementsByClassName(className)[0].classList.toggle("show");
};
And it doesn't work. dropdown doesn't apear at all. I don't know what's going on. Have been looking for the error for a day now.
But if i use the display.block property it works. Js looks like this --
function showDropDownMenu(className)
{
var x = document.getElementsByClassName(className);
if(x[0].style.display = "none"){
x[0].style.display = "block";
}
else
{
x[0].style.display = "none";
}
}
Above works fine but the problem is I have to double click to one every page reload to make the dropdown furst appear.

Your javascript code is actually working. But the issue is that your css for nav .dropdown ul having display: none have more weight than display: block of .show class when applied. That's why even after the toggleClass gets executed, your element is not getting displayd in DOM. Because even after the display: block of show class is applied, the dsplay: none of nav .dropdown ul will be the active style, since the class selection have more weight. The best way to fix this out is to make .show class more specific. That is instead of show use nav .dropdown ul.show this will give more priority to display property of show class when applied.
function showDropDownMenu(className) {
document.getElementsByClassName(className)[0].classList.toggle("show");
}
nav .dropdown ul {
display: none;
position: absolute;
background: black;
min-width: 150px;
left: 0;
box-shadow: 5px 8px 16px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
transition: visibility 0.3s linear;
}
nav .dropdown ul.show {
display: block;
}
<nav>
<ul>
<li onclick="showDropDownMenu('dropdown-menu')" class="dropdown nav-icon">
Click Here
<span class="fa fa-fw fa-bars"></span>
<ul class="dropdown-menu">
<li>Home</li>
<li>Games</li>
<li>Workout</li>
<li>Yoga</li>
<li>About Us</li>
</ul>
</li>
<li class="home nav-icon"><i class="fa fa-fw fa-home"></i></li>
<li class="active nav-btn">Home</li>
<li class="nav-btn">Games</li>
<li class="nav-btn">Stay Fit</li>
<li class="nav-btn">About Us</li>
</ul>
<form class="nav-search">
<input type="search" name="Search" class="text-area" placeholder="Search...">
<span class="fa fa-fw fa-search search-btn"></span>
</form>
</nav>

The CSS code is wrong, is display: block without quotes.

It's generally accepted as bad practice to use inline event listeners in JavaScript or to put inline CSS styles directly on an HTML element. Keeping your code separated makes it easier to debug and avoids CSS specificity issues. I'd suggest restructuring your code like this (I added comments where code should be changed):
<nav>
<ul>
<!-- Remove event listener from HTML -->
<li class="dropdown nav-icon">
Click Here
<span class="fa fa-fw fa-bars"></span>
<!-- Add 'hide' class to hide dropdown on page load -->
<ul class="dropdown-menu hide">
<li>Home</li>
<li>Games</li>
<li>Workout</li>
<li>Yoga</li>
<li>About Us</li>
</ul>
</li>
<li class="home nav-icon"><i class="fa fa-fw fa-home"></i></li>
<li class="active nav-btn">Home</li>
<li class="nav-btn">Games</li>
<li class="nav-btn">Stay Fit</li>
<li class="nav-btn">About Us</li>
</ul>
<form class="nav-search">
<input type="search" name="Search" class="text-area" placeholder="Search...">
<span class="fa fa-fw fa-search search-btn"></span>
</form>
</nav>
nav .dropdown ul {
/* Remove "display: none" from this selector */
position: absolute;
background: black;
min-width: 150px;
left: 0;
box-shadow: 5px 8px 16px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
transition: visibility 0.3s linear;
}
.show {
/* Remove quotes around 'block' */
display: block;
}
/* Create new hide class */
.hide {
display: none;
}
function showDropDownMenu(className) {
var x = document.querySelector(className);
// Toggle hide and show classes
if(x.classList.contains('hide')) {
x.classList.remove('hide')
x.classList.add('show');
} else {
x.classList.remove('show')
x.classList.add('hide');
}
}
// Get li.dropdown and add click listener to it
// call showDropDownMenu with the dropdown-menu ul on every click
document.querySelector('.dropdown').addEventListener('click', function() {
showDropDownMenu('.dropdown-menu');
});
This works, while also keeping your code neatly separated. If you're familiar with jQuery, you can dispense altogether with the .hide and .show classes, since jQuery provides a toggle() function that does this automatically for you:
<!-- Add jQuery script to the head of your HTML
Get jQuery link at https://code.jquery.com/
-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
// JavaScript file reduced to THREE lines
$('nav ul li.dropdown').click(() => {
$('.dropdown-menu').toggle();
})
If you choose the jQuery route, you should remove the .show and .hide classes from your CSS and HTML, and the nav .dropdown ul would need to have display: none on it:
nav .dropdown ul{
/* Add display: none back if using jQuery */
display: none;
position: absolute;
background: black;
min-width: 150px;
left: 0;
box-shadow: 5px 8px 16px 0px rgba(0,0,0,0.5);
z-index: 1;
transition: visibility 0.3s linear;
}
/* .show{
display: block;
}
.hide {
display: none;
} */

You need to apply display:none inline so the display style property returns something:
function showDropDownMenu(className)
{
var x = document.getElementsByClassName(className);
if(x[0].style.display = "none"){
x[0].style.display = "block";
}
else
{
x[0].style.display = "none";
}
}
nav .dropdown ul {
display: none;
position: absolute;
background: black;
min-width: 150px;
left: 0;
box-shadow: 5px 8px 16px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
transition: visibility 0.3s linear;
}
.show {
display: block;
}
<Nav>
<ul>
<li onclick="showDropDownMenu('dropdown-menu')" class="dropdown nav-icon">
<span class="fa fa-fw fa-bars"></span>
<ul class="dropdown-menu" style="display:none">
<li>Home</li>
<li>Games</li>
<li>Workout</li>
<li>Yoga</li>
<li>About Us</li>
</ul>
</li>
<li class="home nav-icon"><i class="fa fa-fw fa-home"></i></li>
<li class="active nav-btn">Home</li>
<li class="nav-btn">Games</li>
<li class="nav-btn">Stay Fit</li>
<li class="nav-btn">About Us</li>
</ul>
<form class="nav-search">
<input type="search" name="Search" class="text-area" placeholder="Search...">
<span class="fa fa-fw fa-search search-btn"></span>
</form>
</Nav>

Changing admin menu class not working on click

I want to make admin navigation. When I click a menu it will be active until I click another menu. When I click another menu that should then be active. In my admin nav, I used the below code but it is not working. All my CSS is working properly, but I can't set the clicked menu as active. How I can fix this problem?
$(function() {
$('li').click(function() {
$('li.active').removeClass('active');
$(this).addClass('active');
});
});
.admin-menu ul {
padding: 0;
margin: 0;
}
.admin-menu ul li {
list-style: none;
transition: .4s;
}
.admin-menu ul li a {
color: #333;
display: block;
padding: 10px 15px;
font-size: 16px;
text-transform: capitalize;
}
.admin-menu ul li:hover, li.active {
background-color: #F8694A !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="admin-nav">
<div class="admin-menu">
<ul>
<li class="active"><i class="fas fa-home"></i> Dashboard</li>
<li><i class="far fa-list-alt"></i> Category</li>
<li><i class="fas fa-book"></i> Books</li>
<li><i class="fas fa-users"></i> Users</li>
<li><i class="fas fa-chalkboard-teacher"></i> E-books</li>
<li><i class="fas fa-cart-arrow-down"></i> Orders</li>
<li><i class="fas fa-layer-group"></i> Others</li>
<li><i class="fas fa-cog"></i> Settings</li>
<li><i class="fas fa-power-off"></i> Logout</li>
</ul>
</div>
</div>

bootstrap large dropdown menu different width size

I have used bootstrap large menu the Dropdown menu don't display same width it's different from each menu. How can I solve this issues the are given below.
.dropdown-header {
font-size: 18px;
}
.dropdown-large {
position: static !important;
}
.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}
.dropdown-menu-large>li>ul {
padding: 0;
margin: 0;
}
.dropdown-menu-large>li>ul>li {
list-style: none;
}
.dropdown-menu-large>li>ul>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.dropdown-menu-large>li ul>li>a:hover,
.dropdown-menu-large>li ul>li>a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu-large .disabled>a,
.dropdown-menu-large .disabled>a:hover,
.dropdown-menu-large .disabled>a:focus {
color: #999999;
}
.dropdown-menu-large .disabled>a:hover,
.dropdown-menu-large .disabled>a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
cursor: not-allowed;
}
.dropdown-menu-large .dropdown-header {
color: #428bca;
font-size: 18px;
}
#media (max-width: 768px) {
.dropdown-menu-large {
margin-left: 0;
margin-right: 0;
}
.dropdown-menu-large>li {
margin-bottom: 30px;
}
.dropdown-menu-large>li:last-child {
margin-bottom: 0;
}
.dropdown-menu-large .dropdown-header {
padding: 3px 15px !important;
}
}
.dropdown-menu {
min-width: 200px;
}
.dropdown-menu.columns-2 {
min-width: 400px;
}
.dropdown-menu.columns-3 {
min-width: 600px;
}
.dropdown-menu li a {
padding: 5px 15px;
font-weight: 300;
}
.multi-column-dropdown {
list-style: none;
margin: 0px;
padding: 0px;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: #333;
white-space: normal;
border-left: 1px solid gray;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: #262626;
}
#media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="main-header">
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="mobile navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand logo" href="index.html"><img src="img/logo.png" alt="cablenet"></a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home<span></span></li>
<li>About Us<span></span></li>
<li class="dropdown dropdown-large"> Cabling<span></span> <b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">We do provide below services:</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Structured Cabling</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Telephone Cabling</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Copper Cabling – Cat 5, Cat 6 and Cat 7</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Fiber Optic Cabling – Single Mode and Multi-Mode</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Cable Support / Tray Systems installation</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Cable Management</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Audio & Video Cables</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Voice / Telecom Cable</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Electrical Cable</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Network Switches</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> 24 Port Patch Panel Loaded with Modular Jacks - Cat3, Cat5e, Cat6</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> UTP Cables - Cat3, Cat5e, Cat6 ,Cat 7</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> UTP Patch Cords - Cat3, Cat5e, Cat6 ,Cat 7</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> 1U /2 U Horizontal Cable Management Strip</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Fiber Optic Cable - Indoor, Outdoor, Armoured, Multimode, Singlemode, 2, 4, 6, 12, 24 core</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Termination Blocks for Telephone Lines - 110 Block, Krone Block</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Fiber Optic Patch Panel - rack mount, wall mount, 6, 12, 24, 48 port c/w SC, ST, FC, LC adapters, Multimode, Singlemode</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Media Converter - Multimode, Singlemode</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> 19" Network Rack - 6U, 12U, 42U, wall mount, standing, customized</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown dropdown-large"> Electrical<span></span><b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do sales and Supply varies Electrical products like Lights, FAN and Electrical Cable</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Services</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do design and install electrical cabling system with safety in place. </li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do install various electrical products like Lights , Fan and other electrical appliances.</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown dropdown-large"> CCTV Surveillance System<span></span><b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><a><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do sales and Supply Various CCTV system as below:</a></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> IP camera with 8 Channel DVR / 16 Channel DVR/ 32 Channel DVR</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Analog camera 8 Channel DVR / 16 Channel DVR/ 32 Channel DVR</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> IP camera with 8 Channel NVR / 16 Channel NVR/ 32 Channel NVR</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Various Hidden camera to secured environments</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Services</li>
<li class="divider"></li>
<li><a><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do design, Install and Support services for various CCTV system to have better secured environments to protect your workplace to enhance the work productivity and to have the piece of minds .</li>
</a>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown dropdown-large"> DAS<span></span><b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Services</li>
<li class="divider"></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Door Access System</li>
</ul>
</div>
</div>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
</nav>
</div>
<!-- Main Header End -->
</header>
check the DAS menu and CCTV menu width size
both are not same width
it's possible to change the same width size for all drop down menus
am using row for each menu

Is this what you are looking for , i have set width:100% to .dropdown-menu
.dropdown-header{
font-size:18px;}
.dropdown-large {
position: static !important;
}
.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}
.dropdown-menu-large > li > ul {
padding: 0;
margin: 0;
}
.dropdown-menu-large > li > ul > li {
list-style: none;
}
.dropdown-menu-large > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.dropdown-menu-large > li ul > li > a:hover,
.dropdown-menu-large > li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu-large .disabled > a,
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
color: #999999;
}
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.dropdown-menu-large .dropdown-header {
color: #428bca;
font-size: 18px;
}
#media (max-width: 768px) {
.dropdown-menu-large {
margin-left: 0 ;
margin-right: 0 ;
}
.dropdown-menu-large > li {
margin-bottom: 30px;
}
.dropdown-menu-large > li:last-child {
margin-bottom: 0;
}
.dropdown-menu-large .dropdown-header {
padding: 3px 15px !important;
}
}
.dropdown-menu {
min-width: 200px;
width:100%;
}
.dropdown-menu.columns-2 {
min-width: 400px;
}
.dropdown-menu.columns-3 {
min-width: 600px;
}
.dropdown-menu li a {
padding: 5px 15px;
font-weight: 300;
}
.multi-column-dropdown {
list-style: none;
margin: 0px;
padding: 0px;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: #333;
white-space: normal;
border-left: 1px solid gray;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: #262626;
}
#media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="main-header">
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="mobile navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand logo" href="index.html"><img src="img/logo.png" alt="cablenet"></a> </div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home<span></span></li>
<li>About Us<span></span></li>
<li class="dropdown dropdown-large"> Cabling<span></span> <b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">We do provide below services:</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Structured Cabling</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Telephone Cabling</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Copper Cabling – Cat 5, Cat 6 and Cat 7</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Fiber Optic Cabling – Single Mode and Multi-Mode</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Cable Support / Tray Systems installation</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Cable Management</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Audio & Video Cables</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Voice / Telecom Cable</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Electrical Cable</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Network Switches</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> 24 Port Patch Panel Loaded with Modular Jacks - Cat3, Cat5e, Cat6</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> UTP Cables - Cat3, Cat5e, Cat6 ,Cat 7</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> UTP Patch Cords - Cat3, Cat5e, Cat6 ,Cat 7</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> 1U /2 U Horizontal Cable Management Strip</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Fiber Optic Cable - Indoor, Outdoor, Armoured, Multimode, Singlemode, 2, 4, 6, 12, 24 core</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Termination Blocks for Telephone Lines - 110 Block, Krone Block</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Fiber Optic Patch Panel - rack mount, wall mount, 6, 12, 24, 48 port c/w SC, ST, FC, LC adapters, Multimode, Singlemode</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Media Converter - Multimode, Singlemode</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> 19" Network Rack - 6U, 12U, 42U, wall mount, standing, customized</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown dropdown-large"> Electrical<span></span><b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do sales and Supply varies Electrical products like Lights, FAN and Electrical Cable</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Services</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do design and install electrical cabling system with safety in place. </li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do install various electrical products like Lights , Fan and other electrical appliances.</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown dropdown-large"> CCTV Surveillance System<span></span><b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><a><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do sales and Supply Various CCTV system as below:</a></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> IP camera with 8 Channel DVR / 16 Channel DVR/ 32 Channel DVR</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Analog camera 8 Channel DVR / 16 Channel DVR/ 32 Channel DVR</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> IP camera with 8 Channel NVR / 16 Channel NVR/ 32 Channel NVR</li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Various Hidden camera to secured environments</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Services</li>
<li class="divider"></li>
<li><a><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do design, Install and Support services for various CCTV system to have better secured environments to protect your workplace to enhance the work productivity and to have the piece of minds .</li>
</a>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown dropdown-large"> DAS<span></span><b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Services</li>
<li class="divider"></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><i class="fa fa-hand-o-right" aria-hidden="true"></i> Door Access System</li>
</ul>
</div>
</div>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
</nav>
</div>
<!-- Main Header End -->
</header>

.dropdown-menu {
width:100%;
}
use the code above i think maybe solve the problem

Bootstrap responsive multi-level navigation menu

I have coded a multi-level navigation menu for bootstrap. It works well in 1200px and above. But when the screen size is under 1200px (I have set 1200px as the breapoint) the first level dropdown menu opens/closes on click well, but the second level dropdown menu does not open on click. I want this second level dropdown menu to open on screensizes below 1200 when its parent anchor is clicked.
For example when services > cosmetic dentistry is clicked on lower than 1200px screen size, I want the '.dropdown-menu' inside it (dental hygiene, dentures etc) to show up/toggleshow(hides on click again).
How can I achieve this?
This is the HTML:
<nav id="navbar" class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-inner">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li class="dropdown">
Services <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li class="dropdown"> Team <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li class="dropdown"> Offers/Fees <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li class="dropdown"> Patients <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Cosmetic Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
General Dentistry <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Braces <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item dropdown dropdown-submenu">
Implants <i class="fa fa-angle-right"></i>
<ul class="dropdown-menu">
<li class="menu-item">Dental Hygiene</li>
<li class="menu-item">Crowns & Bridges</li>
<li class="menu-item">Dentures</li>
</ul>
</li>
<li class="menu-item">Nervous Patients Care</li>
</ul>
</li>
<li>Blog</li>
<li>Referrals</li>
<li>Contact</li>
</ul>
</div>
</div><!-- end navbar-inner -->
</div><!-- end container -->
</nav><!-- end navbar -->
The CSS:
#navbar {
clear: both;
border-radius: 0;
border: 0;
margin: 0;
background: #f9f9f9;
height: auto;
}
#navbar li a {
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
color: #575757;
padding-top: 20px;
padding-bottom: 20px;
}
#navbar li a:hover {
color: #7bcfdc
}
.dropdown-menu {
box-shadow: none;
border-radius: 0;
border: 0;
width: 240px;
padding: 0;
}
.dropdown-submenu {
position:relative;
border-radius: 0;
padding: 0;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-1px;
margin-left:-1px;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
}
#navbar .navbar-nav li a i {
margin-left: 5px;
}
#navbar .navbar-nav li li a{
background: #eee;
text-transform: none;
padding-top: 11px;
padding-bottom: 11px;
}
#navbar .navbar-nav li li {
position: relative;
}
#navbar .navbar-nav li li i {
position: absolute;
right: 20px;
top: 14px;
}
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a {
background: #e5e5e5;
}
#navbar .navbar-nav li li a:hover,
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a:hover
{
background: #ff4e4f;
color: #FFF;
}
/*----- RESPONSIVE STYLES ------*/
#media screen and (max-width: 1199px) {
#navbar .dropdown-menu {
width: 100%;
position: relative;
}
}
#media screen and (max-width: 768px) {
.header-top p {
text-align: center;
}
.header-top a {
margin: 10px auto 0 auto;
clear: both;
display: block;
}
}
#media screen and (min-width: 1200px) {
#navbar .dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
}
I made a JSFiddle for this:
https://jsfiddle.net/Lefosx46/

I took a look at your code. There's a lot going on, so while my answer should work there may be more efficient ways of doing it. It might at least point you in the right direction.
There seemed to be an issue with:
#media screen and (max-width: 1199px) {
#navbar .dropdown-menu {
width: 100%;
position: relative;
}
}
I removed that and added:
#media screen and (max-width: 1199px) {
.dropdown-submenu:hover .dropdown-menu {
display: block;
}
}
You can see a fiddle here: https://jsfiddle.net/t4rnz8dg/
Apologies if I've misunderstood your question!

Categories

Resources