Develop Reference

Text flows over navbar

It works on my old navbar (but it's boostrap 3 and this project is on 5). The text overflows my navbar and causes the text/website to get extra space then what it's supposed to be showing. I need a genius to resolve this for me as i have been stumped on this for a long time.
Issue (images)
https://gyazo.com/c212a931d6770b77998cb3fea3ae87d1 i'm highlighting it as the text can't be seen due to white backround.
Trying to get working (old navbar) https://gyazo.com/66c482022e325cd9bd335ff666377474
Here is a JSfiddle to give an example plus the code i'm using. https://jsfiddle.net/yf90uxhc/2/
code:
document.addEventListener("DOMContentLoaded", function() {
// make it as accordion for smaller screens
if (window.innerWidth < 992) {
// close all inner dropdowns when parent is closed
document.querySelectorAll('.navbar .dropdown').forEach(function(everydropdown) {
everydropdown.addEventListener('hidden.bs.dropdown', function() {
// after dropdown is hidden, then find all submenus
this.querySelectorAll('.submenu').forEach(function(everysubmenu) {
// hide every submenu as well
everysubmenu.style.display = 'none';
});
})
});
document.querySelectorAll('.dropdown-menu a').forEach(function(element) {
element.addEventListener('click', function(e) {
let nextEl = this.nextElementSibling;
if (nextEl && nextEl.classList.contains('submenu')) {
// prevent opening link if link needs to open dropdown
e.preventDefault();
if (nextEl.style.display == 'block') {
nextEl.style.display = 'none';
} else {
nextEl.style.display = 'block';
}
}
});
})
}
// end if innerWidth
});
// DOMContentLoaded
<nav class="navbar navbar-expand-xl navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Amarr Empire
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Caldari State
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Minmatar Republic
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Gallente Federation
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Guristas Pirates
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Angel Cartel
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blood Raider Covenant
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
ORE
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Servant Sisters of Eve
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Mordu's Legion Command
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Sansha's Nation
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Serpentis
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Triglavian Collective
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
EDENCOM
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
</ul>
</div>
</div>
</nav>

You're looking to enable flexbox wrapping on the menu <ul>.
Change
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
To
<ul class="navbar-nav flex-wrap me-auto mb-2 mb-lg-0">

How to select li without children in a multilevel menu with jQuery?

I have a multilevel (tree) menu built with HTML <ul> and <li>. This is a sample of that markup:
<ul class='dl-menu dl-menuopen'>
<li>
<a href='#' class='catlink'>Fashion</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Men</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Shirts</a></li>
<li><a href='#' class='catlink'>Jackets</a></li>
<li><a href='#' class='catlink'>Chinos & Trousers</a></li>
<li><a href='#' class='catlink'>Jeans</a></li>
<li><a href='#' class='catlink'>T-Shirts</a></li>
<li><a href='#' class='catlink'>Underwear</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Women</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Jackets</a></li>
<li><a href='#' class='catlink'>Knits</a></li>
<li><a href='#' class='catlink'>Jeans</a></li>
<li><a href='#' class='catlink'>Dresses</a></li>
<li><a href='#' class='catlink'>Blouses</a></li>
<li><a href='#' class='catlink'>T-Shirts</a></li>
<li><a href='#' class='catlink'>Underwear</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Children</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Boys</a></li>
<li><a href='#' class='catlink'>Girls</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Electronics</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Camera & Photo</a></li>
<li><a href='#' class='catlink'>TV & Home Cinema</a></li>
<li><a href='#' class='catlink'>Phones</a></li>
<li><a href='#' class='catlink'>PC & Video Games</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Furniture</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Living Room</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Sofas & Loveseats</a></li>
<li><a href='#' class='catlink'>Coffee & Accent Tables</a></li>
<li><a href='#' class='catlink'>Chairs & Recliners</a></li>
<li><a href='#' class='catlink'>Bookshelves</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Bedroom</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Beds</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Upholstered Beds</a></li>
<li><a href='#' class='catlink'>Divans</a></li>
<li><a href='#' class='catlink'>Metal Beds</a></li>
<li><a href='#' class='catlink'>Storage Beds</a></li>
<li><a href='#' class='catlink'>Wooden Beds</a></li>
<li><a href='#' class='catlink'>Children's Beds</a></li>
</ul>
</li>
<li><a href='#' class='catlink'>Bedroom Sets</a></li>
<li><a href='#' class='catlink'>Chests & Dressers</a></li>
</ul>
</li>
<li><a href='#' class='catlink'>Home Office</a></li>
<li><a href='#' class='catlink'>Dining & Bar</a></li>
<li><a href='#' class='catlink'>Patio</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Jewelry & Watches</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Fine Jewelry</a></li>
<li><a href='#' class='catlink'>Fashion Jewelry</a></li>
<li><a href='#' class='catlink'>Watches</a></li>
<li>
<a href='#' class='catlink'>Wedding Jewelry</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Engagement Rings</a></li>
<li><a href='#' class='catlink'>Bridal Sets</a></li>
<li><a href='#' class='catlink'>Women's Wedding Bands</a></li>
<li><a href='#' class='catlink'>Men's Wedding Bands</a></li>
</ul>
</li>
</ul>
</li>
</ul>
My goal is to select all <li> nodes that has no children. I want to get the "leaves" of the tree, those elements that have no children, the final nodes.
How can I do this with jQuery?

You should be able to use either of the following:
$(".dl-menu li:not(:has(li))")
or
$(".dl-menu li:not(:has(ul))")

I assume you want all links:
$('li:has(a):not(:has(ul))')
$('li:has(a):not(:has(ul))').each(function(){
console.log(
$(this).html()
);
});
es-console-wrapper{
height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<ul class='dl-menu dl-menuopen'>
<li>
<a href='#' class='catlink'>Fashion</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Men</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Shirts</a></li>
<li><a href='#' class='catlink'>Jackets</a></li>
<li><a href='#' class='catlink'>Chinos & Trousers</a></li>
<li><a href='#' class='catlink'>Jeans</a></li>
<li><a href='#' class='catlink'>T-Shirts</a></li>
<li><a href='#' class='catlink'>Underwear</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Women</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Jackets</a></li>
<li><a href='#' class='catlink'>Knits</a></li>
<li><a href='#' class='catlink'>Jeans</a></li>
<li><a href='#' class='catlink'>Dresses</a></li>
<li><a href='#' class='catlink'>Blouses</a></li>
<li><a href='#' class='catlink'>T-Shirts</a></li>
<li><a href='#' class='catlink'>Underwear</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Children</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Boys</a></li>
<li><a href='#' class='catlink'>Girls</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Electronics</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Camera & Photo</a></li>
<li><a href='#' class='catlink'>TV & Home Cinema</a></li>
<li><a href='#' class='catlink'>Phones</a></li>
<li><a href='#' class='catlink'>PC & Video Games</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Furniture</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Living Room</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Sofas & Loveseats</a></li>
<li><a href='#' class='catlink'>Coffee & Accent Tables</a></li>
<li><a href='#' class='catlink'>Chairs & Recliners</a></li>
<li><a href='#' class='catlink'>Bookshelves</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Bedroom</a>
<ul class='dl-submenu'>
<li>
<a href='#' class='catlink'>Beds</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Upholstered Beds</a></li>
<li><a href='#' class='catlink'>Divans</a></li>
<li><a href='#' class='catlink'>Metal Beds</a></li>
<li><a href='#' class='catlink'>Storage Beds</a></li>
<li><a href='#' class='catlink'>Wooden Beds</a></li>
<li><a href='#' class='catlink'>Children's Beds</a></li>
</ul>
</li>
<li><a href='#' class='catlink'>Bedroom Sets</a></li>
<li><a href='#' class='catlink'>Chests & Dressers</a></li>
</ul>
</li>
<li><a href='#' class='catlink'>Home Office</a></li>
<li><a href='#' class='catlink'>Dining & Bar</a></li>
<li><a href='#' class='catlink'>Patio</a></li>
</ul>
</li>
<li>
<a href='#' class='catlink'>Jewelry & Watches</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Fine Jewelry</a></li>
<li><a href='#' class='catlink'>Fashion Jewelry</a></li>
<li><a href='#' class='catlink'>Watches</a></li>
<li>
<a href='#' class='catlink'>Wedding Jewelry</a>
<ul class='dl-submenu'>
<li><a href='#' class='catlink'>Engagement Rings</a></li>
<li><a href='#' class='catlink'>Bridal Sets</a></li>
<li><a href='#' class='catlink'>Women's Wedding Bands</a></li>
<li><a href='#' class='catlink'>Men's Wedding Bands</a></li>
</ul>
</li>
</ul>
</li>
</ul>

One thing to note here - in your example, NONE of your nodes are empty. They all have children. Some have an "a" tag, and some have a "a" AND "ul" tag. Based on your example, it looks like you want to select all "li" elements that have NO "ul" tags as children. This is called a "parent selector", and cannot be done with CSS alone (unfortunately). But it can be done in javascript, and since you want an answer in javascript, this should work:
$('li:not(:has(ul))').addClass('link');
You can further refine your query as needed.
jsFiddle: https://jsfiddle.net/mspinks/68tguxza/

If you're looking only for li element without ul children then you can do this.
$('li:not(:has(ul))')

Js overriding hyperlink in source code (Cubicle Template by W3Layouts)

I have been trying to crack this one out, whenever I click the link in the << li >> tag, it responds nothing.
<div id="navbar" class="navbar-collapse navbar-right collapse">
<ul class="nav navbar-nav navbar-right cross-effect" id="cross-effect">
<li><a class="cross-effect" href="#features">ES Values</a></li>
<li><a class="cross-effect" href="#about">About ES</a></li>
<li><a class="cross-effect" href="#testimonial">ES Testimonials</a></li>
<li><a class="cross-effect" href="#stats">ES Stats</a></li>
<li><a class="cross-effect" href="http://www.google.com">ES Gallery</a></li>
<li><a class="cross-effect" href="/groups.html" target="_self">ES Groups</a></li>
<li><a class="cross-effect" href="/updates.html" target="_self">ES Updates</a></li>
<li><a class="cross-effect" href="/contact.html" target="_self">Contact ES</a></li>
</ul>
please help me out. it's from the cubicle template from w3layouts

I figured out that the problem is because those that you are clicking, they do not lead to this section page that you divided by id, the lead to another page, and this animation that you added for smooth scroll, is firing even on those links that lead to another page, so add a class to those lists that have id, for example, give class test and change your code to this:
jQuery(document).ready(function($) {
$(".scroll, .navbar li.test a, .footer li a").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
<ul class="nav navbar-nav navbar-right cross-effect" id="cross-effect">
<li class="test"><a class="cross-effect" href="#features">ES Values</a></li>
<li class="test"><a class="cross-effect" href="#about">About ES</a></li>
<li class="test"><a class="cross-effect" href="#testimonial">ES Testimonials</a></li>
<li class="test"><a class="cross-effect" href="#stats">ES Stats</a></li>
<li><a class="cross-effect" href="http://www.google.com">ES Gallery</a></li>
<li><a class="cross-effect" href="/groups.html" target="_self">ES Groups</a></li>
<li><a class="cross-effect" href="/updates.html" target="_self">ES Updates</a></li>
<li><a class="cross-effect" href="contact.html" target="_blank" style="
pointer-events: all;
">Contact ES</a></li>
</ul>

How to create dropdown menu with nested submenu using jQuery

i want to create a dropdown menu with nested submenu so that when users over on a submenu it should display its dropdown list and when the mouse is taken out of the submenu it should hide its dropdown list. i have tried but it works only with on click() method but i want to use on hover(). here is my code
html
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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" href="#"><img src="design/img/logo.png" alt="logo"></a>
<h6><small>Some text</small></h6>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="main-navigation">
<li class="">Accueil</li>
<li class="dropdown">
Groupe Cible <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="-1" href="#">Cible Etudes & Conseils <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="-1">Qui Sommes Nous <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Présentation </a>
<ul class="dropdown-menu">
<li>Cible Etudes/Conseil</li>
<li>Notre Vision</li>
<li>Notre Mission</li>
<li>Nos Valeurs</li>
<li>Notre Force</li>
<li>Nos Filiales</li>
</ul>
</li>
<li>Notre Equipe</li>
<li>Nous Ecrire</li>
<li>Retrouvez Nous </li>
</ul>
</li>
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="0" href="#" data-toggle="dropdown">Notre Offre </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="0" data-toggle="dropdown">Les Enquêtes et Sondage</a>
<ul class="dropdown-menu">
<li><a tabindex="0">procédures Qualité</a></li>
<li>Méthodes</li>
<li><a tabindex="0">outils de Collecte</a></li>
</ul>
</li>
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="0" data-toggle="dropdown">Les Etudes</a>
<ul class="dropdown-menu">
<li class="test" class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Marketing</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Marché</a></li>
<li><a tabindex="0">Consommateurs</a></li>
<li><a tabindex="0">Stratégie Marketing</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" class="test" href="<?=url::site('fr/a_propos/14/development')?>" tabindex="0" data-toggle="dropdown">Développement</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Impact environnemental</a></li>
<li><a tabindex="0">Développement Urbain et Local</a></li>
<li><a tabindex="0">Assainissement</a></li>
<li><a tabindex="0">Evaluation des projets et programmes</a></li>
</ul>
</li>
<li><a tabindex="0">Moyens Logistiques</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="0" data-toggle="dropdown">Le Conseil</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Conseil en Marketing</a></li>
<li><a tabindex="0">Conseil en Gestion</a></li>
<li><a tabindex="0">Recherche de Financement</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="0" data-toggle="dropdown">La Formation </a>
<ul class="dropdown-menu">
<li><a tabindex="0">Formation en Vente</a></li>
<li><a tabindex="0">Formation en Marketing</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Nous Ont Fait Confiance </a>
<ul class="dropdown-menu" >
<li>Cameroun</li>
<li>Afrique</li>
<li>L'international</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Où Intervenons Nous </a>
<ul class="dropdown-menu">
<li>Cameroun</li>
<li>Gabon</li>
<li>Tchad</li>
<li>Congo Brazzaville</li>
<li>Côte d’Ivoire</li>
<li>Burkina Faso</li>
<li>Mauritanie</li>
<li>Mali</li>
<li>Bénin</li>
<li>Guinée Conakry</li>
<li>Niger</li>
<li>Togo</li>
<li>Djibouti</li>
<li>Rwanda</li>
<li>Burundi</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Nos Publications </a>
<ul class="dropdown-menu">
<li>Articles</li>
<li>Résultats</li>
<li>New</li>
</ul>
</li>
</ul>
</li>
<!-- =========================== cible RH ============================== -->
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Cible RH Emploi</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Qui Sommes Nous </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Présentation </a>
<ul class="dropdown-menu">
<li><a tabindex="0">Cible RH Emploi</a></li>
<li><a tabindex="0">Notre Vision</a></li>
<li><a tabindex="0">Notre Mission</a></li>
<li><a tabindex="0">Nos Valeurs</a></li>
<li><a tabindex="0">Notre Force</a></li>
<li><a tabindex="0">Nos Filiales</a></li>
</ul>
</li>
<li>Notre Equipe</li>
<li>Nous Ecrire</li>
<li>Retrouvez Nous </li>
</ul>
</li>
<li >Notre Offre </li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Nous Ont Fait Confiance </a>
<ul class="dropdown-menu">
<li>Cameroun</li>
<li>Afique</li>
<li>L'international</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Où Intervenons Nous </a>
<ul class="dropdown-menu">
<li>Cameroun</li>
<li>Gabon</li>
<li>Tchad</li>
<li>Congo Brazzaville</li>
<li>Côte d’Ivoire</li>
<li>Burkina Faso</li>
<li>Mauritanie</li>
<li>Mali</li>
<li>Bénin</li>
<li>Guinée Conakry</li>
<li>Niger</li>
<li>Togo</li>
<li>Djibouti</li>
<li>Rwanda</li>
<li>Burundi</li>
</ul>
</li>
<li class="dropdown-submenu" id="men">
<a class="test" href="" tabindex="0" data-toggle="dropdown">Nos Publications </a>
<ul class="dropdown-menu">
<li>Articles</li>
<li>Résultats</li>
<li>New</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown <?=(!empty($service))?"active":""?>">
Services <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Web Design</li>
<li>SEO</li>
</ul>
</li>
<li class="dropdown <?=(!empty($client))?"active":""?>">
Clients <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>MTN</li>
<li>Apple</li>
</ul>
</li>
<li class="dropdown <?=(!empty($equipe))?"active":""?>">
Team <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Mark</li>
<li>John</li>
</ul>
</li>
<li class="dropdown <?=(!empty($partenaire))?"active":""?>">
Partners <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Bootstrap</li>
<li>Ubuntu</li>
</ul>
</li>
<li class="dropdown <?=(!empty($actualite))?"active":""?>">
News <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Perl</li>
<li>Python</li>
</ul>
</li>
<li class="dropdown <?=(!empty($project))?"active":""?>">
Projects <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Java</li>
<li>Ajax</li>
</ul>
</li>
<li class="dropdown <?=(!empty($contact))?"active":""?>">
Contacts <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Contact Cible Etudes/Conseils</li>
<li>Contact Cible RH</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
then my jquery
$('a.test + ul').css("display","none");
$('.dropdown-submenu').css("position","relative");
$('.dropdown-submenu .dropdown-menu').css({"top": "0","left": "100%","margin-top": "-1px"});
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// Re-add .open to parent sub-menu item
$(this).parent().addClass('open');
$(this).parent().find("ul").parent().find("li.dropdown").addClass('open');
});
please help me! Thanks.

You can do this by simply using CSS like follows-
.dropdown-submenu:hover .dropdown-menu {
display: block;
margin-top: 0; // remove the gap so it doesn't close
}
Working fiddle here

Bootstrap Inline List with Dropdown

I'm using Bootstrap 3 with the list-inline class (I know I could use the default, but I don't want any of the default styling)
<nav class='main-nav'>
<ul class="list-inline">
<li><a href='#'>Test</a></li>
<li>
Test
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
http://jsfiddle.net/9kVCZ/
But the dropdown doesn't appear under, it appears way at the bottom.

You need to add the class dropdown to your nav element.
<nav class='main-nav dropdown'>
<ul class="list-inline">
<li><a href='#'>Test</a></li>
<li>
Test
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
Working Fiddle

If the goal of your code is to show the dropdown menu just by clicking on the second "Test", you should add the class dropdown to its parent <li>
<nav class='main-nav'>
<ul class="list-inline">
<li><a href='#'>Test1</a></li>
<li class="dropdown">
Test2
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</nav>
Updated fiddle