4
Я разрабатываю многострочное меню в бутстрапе, и я использовал класс bootstrap css «nav-justified» для равенства по ширине каждого меню. Класс «nav-justified» работает очень хорошо для равной ширины. Но мне нужен другой вариант, равный высоте, поддерживающий равенство высоты для каждого меню в этом разделе. Я добавил мою проблему с графически ниже: 
Настроить высоту меню навигационной панели
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">
<a href="#">HOME</a>
</li>
<li>
<a href="#">GARMENTS</a>
</li>
<li>
<a href="#">YARN DYEING</a>
</li>
<li>
<a href="#">KNITTING</a>
</li>
<li>
<a href="#">FABRIC DYEING</a>
</li>
<li>
<a href="#">COMMON MODULES</a>
</li>
<li>
<a href="#">GENERAL SETTING</a>
</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>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li>
<a href="#">Separated link</a>
</li>
<li>
<a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<ul class="nav nav-justified" style="border: 1px solid #f00">
<li>
<a href="#">HELP</a>
</li>
</ul>
</li>
<li>
<ul class="nav nav-justified">
<li>
<a href="#">SUPPORT</a>
</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>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li>
<a href="#">Separated link</a>
</li>
<li>
<a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul class="nav nav-justified">
<li>
<a href="#">NO MENU</a>
</li>
</ul>
<ul class="nav nav-justified">
<li>
<a href="#">NO MENU</a>
</li>
</ul>
</li>
<li>
<ul class="nav nav-justified">
<li>
<a href="#">NO MENU</a>
</li>
</ul>
<ul class="nav nav-justified">
<li>
<a href="#">NO MENU</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>EDIT ======================== ==========================
Я установил эту проблему в plunker
Но другая проблема, возникающая самозагрузки выпадающий всплывающее окно не приходит правильно в IE, Как ниже 
Мне нужно это решение, это работает в хромированном и мозиле, в чем проблема? 
Я добавил свой код в качестве "работоспособный фрагмент кода." Это родная функция в StackOverflow. Нет необходимости в plnkr. – rnevius
@rnevius, Спасибо за ваше сотрудничество. – Shohel
Пожалуйста, не используйте тег «bootstrap», используйте «twitter-bootstrap», так как это означает что-то еще. –