Adjust bootstrap navbar menu height - html

Question

I am developing a multiline menu in bootstrap and I have used a bootstrap css class “nav-justified” for width equality of every menu. The class “nav-justified” is working very well for equal width. But I need another option that is equal height, maintain height equality for every menu in that section. I added my problem with graphically in below:
nav.navbar {
width: 100%;
border: none;
margin: 0;
padding: 0;
background: #adadad;
border-bottom: 1px solid #8e8e8e
/*#8e8e8e*/
;
}
nav.navbar-fixed-top {
height: 150px;
position: fixed;
margin-left: 5px;
margin-right: 5px;
top: 26px;
bottom: 0;
right: 0;
left: 0;
float: none;
padding: 5px 5px 0px 5px;
background: #adadad;
/*mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #202020 25%, #202020 75%, rgba(255, 255, 255, 0) 100%);*/
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
nav .container-fluid {
padding-right: 0px;
padding-left: 0px;
height: 100%;
}
.navbar-header .navbar-toggle .icon-bar {
background-color: black;
}
ul.top-menu {
/*width: 100%;*/
border: none;
margin: 0px 0px 0px 0px;
padding: 0;
/*height: 44px;*/
border-bottom: 1px solid #bbbbbb;
border-radius: 6px;
background: #5c5a5a;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5c5a5a), to(#3d3b3b));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #3d3b3b, #5c5a5a);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #3d3b3b, #5c5a5a);
/* IE 10 */
background: -ms-linear-gradient(top, #3d3b3b, #5c5a5a);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #3d3b3b, #5c5a5a);
vertical-align: middle;
background: #353535;
/* Old browsers */
background: -moz-linear-gradient(top, #353535 0%, #5c5a5a 50%, #303030 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353535), color-stop(50%, #5c5a5a), color-stop(100%, #303030));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #353535 0%, #5c5a5a 50%, #303030 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #353535 0%, #5c5a5a 50%, #303030 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #353535 0%, #5c5a5a 50%, #303030 100%);
/* IE10+ */
background: linear-gradient(to bottom, #353535 0%, #5c5a5a 50%, #303030 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#353535', endColorstr='#303030', GradientType=0);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
ul.top-menu > li.active {
background: #ff0000;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6f0505), to(#ff0000));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #ff0000, #6f0505);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #ff0000, #6f0505);
/* IE 10 */
background: -ms-linear-gradient(top, #ff0000, #6f0505);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #ff0000, #6f0505);
outline: none;
}
ul.top-menu > li:last-child.active {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
ul.top-menu > li:first-child.active {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
ul.top-menu > li:hover {
cursor: pointer;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
ul.top-menu > li:last-child:hover {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
ul.top-menu > li:first-child:hover {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
ul.sub-menu {
/*width: 100%;*/
border: none;
margin: 0;
padding: 0;
vertical-align: middle;
}
ul.sub-menu > ul > li {
display: block;
/*width: 100%;*/
border: none;
margin: 0;
padding: 0;
vertical-align: middle;
}
ul.sub-menu > li > ul > li > a {
text-align: left;
vertical-align: middle;
/*height: auto;*/
/*width: 100%;*/
color: #101010;
font-size: 10pt;
white-space: nowrap;
text-transform: capitalize;
text-shadow: 1px 1px 1px rgba(200, 200, 200, 0.9);
}
ul.sub-menu > li > ul > li > a:hover {
cursor: pointer;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
color: #000;
}
ul.dropdown-menu {
margin-top: -2px;
/*position:relative;*/
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0px;
left: 100%;
margin-top: -1px;
margin-left: -1px;
box-sizing: border-box;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.dropdown-menu > ul > ul {
border-radius: 0px;
width: 100%;
}
.dropdown-menu > li > a {
display: block;
padding: 5px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #101010;
font-size: 10pt;
white-space: nowrap;
text-transform: capitalize;
width: 100%;
}
.dropdown-menu > li > a:hover {
background: #ff0000;
}
.dropdown-menu > li {
/*box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);*/
box-sizing: border-box;
border-bottom: 0.5px solid #d5d5d5;
border-top: 0.5px solid #f9f9f9;
border-radius: 0px;
min-width: 260px;
width: 100%;
background: #f2f2f2;
text-align: left;
}
.dropdown-menu > ul > li > a {
box-sizing: border-box;
border-radius: 0px;
width: 100%;
}
.dropdown-toggle > i {
text-align: right;
right: 10px;
position: absolute;
overflow: hidden;
line-height: 1.42857143;
}
.dropdown-menu > li.manage-bar {
background: #bbbbbb;
}
.dropdown-menu > li.manage-bar a {
color: #101010;
}
.dropdown-menu > li.report-bar {
background: #bbbbbb;
}
.dropdown-menu > li.report-bar a {
color: #101010;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="btn btn-primary navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-navbar-collapse-1">
<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="#">Brand</a>-->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="menu-navbar-collapse-1">
<ul class="nav nav-justified top-menu">
<li class="active">
HOME
</li>
<li>
GARMENTS
</li>
<li>
YARN DYEING
</li>
<li>
KNITTING
</li>
<li>
FABRIC DYEING
</li>
<li>
COMMON MODULES
</li>
<li>
GENERAL SETTING
</li>
</ul>
<ul class="nav nav-justified">
<li>
<ul class="nav nav-justified" style="border: 1px solid #f00">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">ADMIN <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li>
Separated link
</li>
<li>
One more separated link
</li>
</ul>
</li>
</ul>
<ul class="nav nav-justified" style="border: 1px solid #f00">
<li>
HELP
</li>
</ul>
</li>
<li>
<ul class="nav nav-justified">
<li>
SUPPORT
</li>
</ul>
<ul class="nav nav-justified">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">CHAT <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li>
Separated link
</li>
<li>
One more separated link
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul class="nav nav-justified">
<li>
NO MENU
</li>
</ul>
<ul class="nav nav-justified">
<li>
NO MENU
</li>
</ul>
</li>
<li>
<ul class="nav nav-justified">
<li>
NO MENU
</li>
</ul>
<ul class="nav nav-justified">
<li>
NO MENU
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
EDIT==================================================
I have fixed this problem in plunker
But another problem is arising bootstrap dropdown popup does not come properly in IE, Like as below
I need this solution, this is working in chrome and mozila, whats the problem of me?

Answer 1

The complete solution is here
HTML CODE
html {
font-size: 10px;
position: relative;
min-height: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
html, body {
overflow-x: hidden;
height: 100%;
margin: 0;
}
body {
background: #efeff0 /*url('../img/background.jpg') no-repeat*/;
background-size: cover;
background-attachment: fixed;
/*font: 300 16px 'segoe', Helvetica, Arial, sans-serif;*/
background-color: #efeff0;
color: #303030;
font-family: segoe,"Helvetica Neue",Arial,sans-serif;
font-size: 14px;
line-height: 1.42857;
height: 100%;
width: 100%;
position: absolute;
/*border:5px solid #5f5f5f;*/
overflow: hidden;
}
/* Customize the nav-justified links to be fill the entire space of the .navbar */
.navbar-header .navbar-toggle .icon-bar {
background-color: black;
}
.nav-justified > li > a {
color: inherit;
}
.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
background-image: none;
background: none;
-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}
.nav-justified > li:first-child > a {
/*border-radius: 5px 5px 0 0;*/
}
.nav-justified > li:last-child > a {
/*border-bottom: 0;
border-radius: 0 0 5px 5px;*/
}
.nav-justified > li > a:hover {
background: none;
background-image: none;
}
.nav > li > a {
padding: 5px 10px 0px 20px;
}
#media (min-width: 768px) {
/*.nav-justified {
max-height: 52px;
}*/
.nav-justified > li > a {
border-right: 0.5px solid #404040;
border-left: 0.5px solid #353535;
color: #fff;
text-align: left;
}
.nav-justified > li:first-child > a {
border-left: 0;
border-radius: 6px 0 0 6px;
}
.nav-justified > li:last-child > a {
border-right: 0;
border-radius: 0 6px 6px 0;
}
}
.navbar-collapse {
border-top: 0px solid #4b4b4b;
/*padding:0px 5px 0px 5px;*/
}
/*.navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
padding: 5px 5px 0px 5px;
}*/
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
margin: 0px 5px 0px 5px;
}
nav.navbar-fixed-top {
height: 150px;
position: fixed;
top: 26px;
bottom: 0;
right: 0;
left: 0;
float: none;
background: #adadad;
/*mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #202020 25%, #202020 75%, rgba(255, 255, 255, 0) 100%);*/
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
.navbar-fixed-top, .navbar-fixed-bottom {
position: relative;
}
nav .container-fluid {
padding-right: 0px;
padding-left: 0px;
overflow: visible;
}
nav.navbar {
/*display: block;*/
width: 100%;
border: none;
margin: 0;
padding: 0;
background: #adadad;
border-bottom: 1px solid #8e8e8e /*#8e8e8e*/;
}
ul.top-menu {
width: 100%;
border: none;
margin: 5px 0px 0px 0px;
padding: 0;
min-height: 44px;
border-bottom: 1px solid #bbbbbb;
border-radius: 6px;
background: #5c5a5a;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5c5a5a), to(#3d3b3b));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #3d3b3b, #5c5a5a);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #3d3b3b, #5c5a5a);
/* IE 10 */
background: -ms-linear-gradient(top, #3d3b3b, #5c5a5a);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #3d3b3b, #5c5a5a); /*box-shadow: 2px 2px 2px rgba(0,0,0,0.40);
-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.40);
-o-box-shadow: 2px 2px 2px rgba(0,0,0,0.40);
-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.40);
-ms-box-shadow: 2px 2px 2px rgba(0,0,0,0.40);*/
vertical-align: middle;
background: #353535; /* Old browsers */
background: -moz-linear-gradient(top, #353535 0%, #5c5a5a 50%, #303030 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353535), color-stop(50%, #5c5a5a), color-stop(100%, #303030)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #353535 0%, #5c5a5a 50%, #303030 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #353535 0%, #5c5a5a 50%, #303030 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #353535 0%, #5c5a5a 50%, #303030 100%); /* IE10+ */
background: linear-gradient(to bottom, #353535 0%, #5c5a5a 50%, #303030 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#303030', GradientType=0 ); /* IE6-9 */
/*background:url(NEXTIT.CK.GS.WebClient/Content/images/admin-logo.png) #fff;*/
/*mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #202020 25%, #202020 75%, rgba(255, 255, 255, 0) 100%);*/
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6); /*background:white;
background:rgba(255,255,255,0.8);*/
/*filter:blur(4px);
-o-filter:blur(4px);
-ms-filter:blur(4px);
-moz-filter:blur(4px);
-webkit-filter:blur(4px);*/
}
ul.top-menu > li > a {
color: #fff;
font-weight: normal;
}
ul.top-menu > li.active {
background: #ff0000;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6f0505), to(#ff0000));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #ff0000, #6f0505);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #ff0000, #6f0505);
/* IE 10 */
background: -ms-linear-gradient(top, #ff0000, #6f0505);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #ff0000, #6f0505);
outline: none;
}
ul.top-menu > li:last-child.active {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
ul.top-menu > li:first-child.active {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
ul.top-menu > li:hover {
/*background-color: #f00;*/
/*border-radius:6px;*/
/*background:rgba(255, 255, 255, 0.2);*/
cursor: pointer;
/*background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(255,255,255,0.5) 50%, rgba(0,0,0,0.2) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(50%,rgba(255,255,255,0.2)), color-stop(100%,rgba(0,0,0,0.2)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.2) 50%,rgba(0,0,0,0.2) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.2) 50%,rgba(0,0,0,0.2) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.2) 50%,rgba(0,0,0,0.2) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.2) 50%,rgba(0,0,0,0.2) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#33000000',GradientType=0 );
-webkit-box-shadow: inset 5px rgba(0,0,0,.2), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 5px rgba(0,0,0,.2), 0 0 8px rgba(102, 175, 233, 0.6);*/
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}
ul.top-menu > li:last-child:hover {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
ul.top-menu > li:first-child:hover {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
ul.sub-menu {
width: 100%;
height: 100px;
border: none;
margin: 0;
padding: 0;
vertical-align: middle;
list-style: none;
display: block; /*box-shadow: 2px 2px 2px rgba(0,0,0,0.40);
-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.40);
-o-box-shadow: 2px 2px 2px rgba(0,0,0,0.40);
-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.40);
-ms-box-shadow: 2px 2px 2px rgba(0,0,0,0.40);*/
}
ul.sub-menu > li {
height: 100px;
border: none;
margin: 0;
padding: 0;
vertical-align: middle;
list-style: none;
}
ul.sub-menu > li > div {
height: 100%;
display: table;
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
ul.sub-menu > li > div > ul {
display: table-row;
}
ul.sub-menu > li > div > ul > li {
display: table-cell;
width: 100%;
border: none;
margin: 0;
padding: 0;
vertical-align: middle;
padding-left: 20px;
height: auto;
}
ul.sub-menu > li > div > ul > li > a {
text-align: left;
text-decoration: none;
height: 100%;
line-height: 100%;
display: table;
content: "";
clear: both;
vertical-align: middle;
width: 100%;
color: #101010;
font-size: 10pt;
white-space: nowrap;
text-transform: capitalize;
text-shadow: 1px 1px 1px rgba(200,200,200,0.9);
padding: 0px;
}
ul.sub-menu > li > div > ul > li > a > span {
line-height: 100%;
display: table-cell;
vertical-align: middle;
clear: both;
}
ul.sub-menu > li > div > ul > li > a > span i {
float: right;
margin-right: 14px;
content: "";
clear: both;
/*margin-top: -18px;
right: 10px;
text-align: right;*/
}
ul.sub-menu > li > div > ul > li > a:hover {
background: none;
}
ul.sub-menu > li > div > ul > li:hover {
cursor: pointer;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
/*-webkit-box-shadow:0px 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow:0px 1px 1px rgba(0, 0, 0, 0.1);
box-shadow:0px 1px 1px rgba(0, 0, 0, 0.1);*/
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
color: #000;
}
/*ul.sub-menu > li > div > ul > li.dropdown > ul.dropdown-menu {
top: 100%;
}*/
ul.dropdown-menu {
width: 100%;
margin: 0;
padding: 0;
}
li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0px;
left: 100%;
margin-top: -2px;
margin-left: -1px;
/*-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;*/
/*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);*/
box-sizing: border-box;
}
.dropdown-submenu > .dropToLeft {
left: auto;
right: 100%;
top: 0px;
/*position:relative;*/
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.dropdown-menu > ul > ul {
border-radius: 0px;
width: 100%;
}
.dropdown-menu > li > a {
display: block;
padding: 5px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #101010;
font-size: 10pt;
white-space: nowrap;
text-transform: capitalize;
width: 100%;
}
.dropdown-menu > li > a:hover {
background: #ff0000;
}
.dropdown-menu > li:hover {
background: #ff0000;
}
.dropdown-menu > li {
/*box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);*/
box-sizing: border-box;
border-bottom: 0.5px solid #d5d5d5;
border-top: 0.5px solid #f9f9f9;
border-radius: 0px;
width: 100%;
background: #f2f2f2;
text-align: left;
}
.dropdown-menu > ul > li > a {
/*box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);*/
box-sizing: border-box;
/*border-bottom:1px solid rgba(0,0,0,0.40);
border-top:1px solid #ccc;*/
border-radius: 0px;
width: 100%;
}
.dropdown-toggle > i {
text-align: right;
right: 10px;
position: absolute;
overflow: hidden;
line-height: 1.42857143;
}
.dropdown-menu > li.manage-bar {
background: #bbbbbb;
}
.dropdown-menu > li.manage-bar a {
color: #101010;
}
.dropdown-menu > li.report-bar {
background: #bbbbbb;
}
.dropdown-menu > li.report-bar a {
color: #101010;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script data-require="bootstrap#*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-navbar-collapse-1">
<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="#">Brand</a>-->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="menu-navbar-collapse-1">
<ul class="top-menu nav nav-justified">
<li class="active">HOME</li>
<li>GARMENTS</li>
<li>YARN DYEING</li>
<li>KNITTING</li>
<li>FABRIC DYEING</li>
<li>COMMON MODULES</li>
<li>GENERAL SETTING</li>
</ul>
<ul class="sub-menu nav nav-justified">
<li>
<div>
<ul>
<li class="dropdown"><span>ADMIN <span class="caret"></span></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li class="dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Manage
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><span>HELP</span></li>
</ul>
</div>
</li>
<li>
<div>
<ul>
<li><span>HELP</span></li>
</ul>
<ul>
<li class="dropdown"><span>CHAT<span class="caret"></span></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</li>
<li>
<div>
<ul>
<li><span>NO MENU</span></li>
</ul>
<ul>
<li><span>NO MENU</span></li>
</ul>
</div>
</li>
<li>
<div>
<ul>
<li><span>NO MENU</span></li>
</ul>
<ul>
<li class="dropdown"><span>ADMIN<span class="caret"></span></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li class="dropdown-submenu ">Manage <span class="caret"></span>
<ul class="dropdown-menu dropToLeft" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</body>
</html>