In Multilevel dropdown menu, how to prevent sub menus from overlapping - javascript

In my multilevel dropdown, I am facing problem in sub menus, If i click on 'products' it works nice, but when i click on 'products2' it ovelapps the products menu, I want products menu to disappear and products2 menu to be only visible menu. Thanks in advance
One sub-menu must close before other opens
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
<p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Products <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Products 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">1nd level dropdown</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>


Try with this $('.dropdown-submenu ul').hide();
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
<p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Products <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Products 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">1nd level dropdown</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$('.dropdown-submenu ul').hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>

Related

HTML dropdown elements

I have been trying to make an HTML page that contains a dropdown element that can also go whithin another dropdown, like at this page: https://coda.io/d/_dIXWo7SiwOb/Untitled_su1WJ
I do not want a dropdown list.
I tried a few things, but they either couldn't stack, or they were just dropdown lists.

There are a lot of examples/tutorials out there on how to do something like this with Bootstrap and jquery. I hacked out a quick example that seems to do what you want using an example from W3 schools and it seems to be working reasonably well. Credit to W3 schools for providing the base example I worked from to come up with the end result you wanted. I will leave it to you to look at the code and modifying formatting (e.g. where carets go) and such, but the basic logic and functionality seem to be what you are looking for.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="container">
<h2>Untitled</h2>
<div class="dropdown">
<span class="dropdown-toggle" type="button" data-toggle="dropdown">Level 1
<span class="caret"></span></span>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Sublevel 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Sublevel 3</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Sublevel 2 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Sublevel 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>

Multi-level bootstrap Navbar: Can't hover on children elements

So I'm trying to make a multi-level navbar in my project using Bootstrap Navbar with additional CSS and Jquery.
Here are the codes:
CodePen
$(function() {
// ------------------------------------------------------- //
// Multi Level dropdowns
// ------------------------------------------------------ //
$("ul.dropdown-menu [data-toggle='dropdown']").on("mouseover", function(event) {
event.preventDefault();
event.stopPropagation();
$(this).siblings().toggleClass("show");
});
$("ul.dropdown-menu [data-toggle='dropdown']").on("mouseleave", function(event) {
$(this).siblings().removeClass("show");
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>a:after {
content: "\f0da";
float: right;
border: none;
font-family: 'FontAwesome';
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: 0px;
margin-left: 0px;
}
.dropdown-item {
padding: .25rem 0.5rem!important;
}
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/5336ef90a8.js" crossorigin="anonymous"></script>
<title>Test</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="./"> <img class="favicon" src="{{asset('img/Favicon.ico')}}" alt=""> </a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#headerNav"
aria-controls="headerNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="headerNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<!-- Level one dropdown -->
<li class="nav-item dropdown">
<a id="dropdownMenu1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
class="nav-link dropdown-toggle">CATEGORIES</a>
<ul aria-labelledby="dropdownMenu1" class="dropdown-menu border-0 shadow">
<li class="dropdown-submenu">
<a id="dropdownMenu2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" class="dropdown-item dropdown-toggle">CEILING FANS</a>
<ul aria-labelledby="dropdownMenu2" class="dropdown-menu border-0 shadow">
<li>
<a tabindex="-1" href="#" class="dropdown-item">CF1</a>
</li>
<li>CF2</li>
<li>CF3</li>
</ul>
</li>
<li class="dropdown-submenu">
<a id="dropdownMenu2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" class="dropdown-item dropdown-toggle">TABLE FANS</a>
<ul aria-labelledby="dropdownMenu2" class="dropdown-menu border-0 shadow">
<li>
<a tabindex="-1" href="#" class="dropdown-item">TF1</a>
</li>
<li>TF2</li>
<li>TF3</li>
</ul>
</li>
<li class="dropdown-submenu">
<a id="dropdownMenu2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" class="dropdown-item dropdown-toggle">EXHAUST FANS</a>
<ul aria-labelledby="dropdownMenu2" class="dropdown-menu border-0 shadow">
<li>
<a tabindex="-1" href="#" class="dropdown-item">EF1</a>
</li>
<li>EF2</li>
<li>EF3</li>
</ul>
</li>
</ul>
</li>
<!-- End Level one -->
</ul>
</div>
</nav>
<!-- End Navbar -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/67aa126bbd.js" crossorigin="anonymous"></script>
</body>
</html>
The problem is I can't hover on children like CF1, CF2, CF3,... and so on. When I move the mouse out of its parent element (which is Ceiling Fans), the sub-menu disappears.

Just Add This CSS
.dropdown-submenu:hover .dropdown-menu {
display: block;
}

Multilevel Navbar on Bootstrap 4 (Bootswatch) on right side

So I have a multilevel Navbar in Bootswatch 4 (Bootstrap 4) on the right sid in the desktop version (which I took from an example without really understanding the CSS and Javascript behind it) and I want to pop the Submenus open to the left side as normally works with "dropdown-menu-right" which doesn't help here. How can I still make the Submenus pop open to the left? Can someone help me how the CSS / Javascript could look like that it can work that way?
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.0/cosmo/bootstrap.min.css">
<link href="bootstrap-4-navbar.css" rel="stylesheet">
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a::after {
transform: rotate(0deg);
position: absolute;
right: 6px;
top: .8em;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<nav class="navbar navbar-expand-lg fixed-top bg-dark navbar-dark">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">AAA</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
</script>
</body>
</html>

You need to adjust the left position of the submenus...
.dropdown-submenu>.dropdown-menu {
top: 0;
left: -10rem; /* 10rem is the min-width of dropdown-menu */
position: relative;
}
Bootstrap 4 Dropdown Submenus Right
Related: Bootstrap dropdown sub menu missing

Bootsrap 4 Dropdown Not showing all the links in dropdown-menu

bootstrap 4 drop down is not showing all the links in dropdown-menu please refer image
its not showing beyond red band , is there something i missing cant figure out that
.red-block{
height: 220px;
background-color: red;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid no-padding mt-3">
<div class="row no-gutter">
<div class="col-md-6">
<div class="red-block ">
<div class="title">
<div class="light-title text-uppercase ml-20 mr-5 pt-5 ">
<h4 class="text-left">our <span>Services</span></h4>
<hr class="light" align="left" style="width:22%;">
</div>
</div>
<div class="dropdown ml-20">
<button type="button" class="btn btn-secondary text-uppercase dropdown-toggle" data-toggle="dropdown">
State
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</div>
</div>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->
**
So link 3 is not visible , can someone correct this ?

Can u present your full code. Anyways, please try my code and see if it helps. I have replaced your div and anchor to ul - li - anchor structure.
let me know if it helps.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="dropdown ml-20">
<button type="button" class="btn btn-secondary text-uppercase dropdown-toggle" data-toggle="dropdown">
State
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</div>
</body>
</html>

Try adding this in your css.
i dont know this will work inside your html file or not.
.dropdown-menu{
postition: relative;
z-index:-1
}

Sometimes this happens when you try to display an element outside of a container/element that is overflow: hidden
Ex:
.red-block{
overflow: hidden;
background-color: red;
height: 220px;
}
What you could do is 1. Check if any there's any overflow: hidden element and change it or 2. move the .dropdown element right next to the div.red-block like this:
HTML
<div class="container-fluid no-padding mt-3">
<div class="row no-gutter">
<div class="col-md-6">
<!-- RED BLOCK -->
<div class="red-block ">
<div class="title">
<div class="light-title text-uppercase ml-20 mr-5 pt-5 ">
<h4 class="text-left">our <span>Services</span></h4>
<hr class="light" align="left" style="width:22%;">
</div>
</div>
</div>
<!-- END RED BLOCK
DROPDOWN -->
<div class="dropdown ml-20">
<button type="button" class="btn btn-secondary text-uppercase dropdown-toggle" data-toggle="dropdown">
State
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</div>
</div>
<!-- END DROPDOWN -->
CSS
.red-block{
background-color: red;
height: 220px;
}
.dropdown.ml-20{
position: absolute;
bottom: 25%;
}
Hope it helps

bootstrap drop down not dropping down

I am trying to get a bootstrap drop down menu to work but I seem to have something going wrong. Here is my html:
<head>
<meta charset="utf-8">
<title>memberpage</title>
<link rel="stylesheet" type="text/css" href="/style/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/style/bootstrap.js">
</head>
<div class="page-header">
<div class="dropdown" style="margin-bottom:10px;">
<button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu test" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="">HTML</a></li>
<li role="presentation"><a role="menuitem" href="">CSS</a></li>
<li role="presentation"><a role="menuitem" href="">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="">About Us</a></li>
</ul>
</div>
</div>
I get the button to show up but when I click it I don't get anything. I am using the default js and css files from bootstrap. I am want it to be just an normal drop down menu.
[EDIT] okay so after adding the jquery here is my code.
<head>
<meta charset="utf-8">
<title>memberpage</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/style/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/style/bootstrap.js">
</head>
<div class="page-header">
<div class="dropdown" style="margin-bottom:10px;">
<button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="">HTML</a></li>
<li role="presentation"><a role="menuitem" href="">CSS</a></li>
<li role="presentation"><a role="menuitem" href="">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="">About Us</a></li>
</ul>
</div>
</div>
I am still getting nothing from the page. I get the button but nothing else. no dropdown nor any response from the page.

You forgot jquery,
Add this before bootstrap.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
Quoting from Bootstrap Javascript ,
Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).
This works well for me:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="page-header">
<div class="dropdown" style="margin-bottom:10px;">
<button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="">HTML</a></li>
<li role="presentation"><a role="menuitem" href="">CSS</a></li>
<li role="presentation"><a role="menuitem" href="">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="">About Us</a></li>
</ul>
</div>
</div>
</body>
I am just using CDN for the files. Fiddle

You did not include js file.Please check all script link, is it ok or not.I just include js file and its working for me.Take a look WORKING FIDDLE.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Categories