Подменю Bootstrap - выпадающие колонны с одинаковой высотой

Question

В бутстрап-кубменю (https://vsn4ik.github.io/bootstrap-submenu/). Я хочу сделать столбцы выпадающих подменю с одинаковой высотой. Я пробовал все, но безуспешно. Можете ли вы направить меня, как я могу это сделать. С иллюстрациями, показывающими желаемый эффект (https://gyazo.com/58be79beaae04644a5b1dde6448514b5). Благодарю.

Код: https://jsfiddle.net/at7a7mfr/1/

<div class="navigation"> 
    <nav class="navbar navbar-default"> 
     <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav firstNav" id="general-navigation"> 
       <li class="dropdown"> 
        <a href="#" tabindex="1" data-toggle="dropdown" data-submenu="">LEVEL 1</a> 
        <ul class="dropdown-menu secondNav"> 
         <li class="dropdown-submenu"> 
          <a href="#" tabindex="2">LEVEL 2</a> 
          <ul class="dropdown-menu thirdNav"> 
           <li> 
            <a href="#" tabindex="3">LEVEL 3</a> 
           </li> 
          </ul> 
         </li> 
         <li class="dropdown-submenu"> 
          <a href="#" tabindex="2">LEVEL 2</a> 
          <ul class="dropdown-menu thirdNav"> 
           <li> 
            <a href="#" tabindex="3">LEVEL 3</a> 
           </li> 
          </ul> 
         </li> 
         <li class="dropdown-submenu"> 
          <a href="#" tabindex="2">LEVEL 2</a> 
          <ul class="dropdown-menu thirdNav"> 
           <li> 
            <a href="#" tabindex="3">LEVEL 3</a> 
           </li> 
          </ul> 
         </li> 
         <li class="dropdown-submenu"> 
          <a href="#" tabindex="2">LEVEL 2</a> 
          <ul class="dropdown-menu thirdNav"> 
           <li> 
            <a href="#" tabindex="3">LEVEL 3</a> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </nav> 
</div> 

Answer 1

Удалить позицию относительно из .dropdown-подменю & добавить высоту 100% и недостаточной мере top: от 0 до .dropdown-submenu .dropdown-menu.

@media (min-width: 768px) { 
.dropdown-submenu { 
} 
.dropdown-submenu .dropdown-menu { 
top: 0px; 
left: 100%; 
margin-top: 0; 
border-top-left-radius: 0; 
position:absolute; 
height: 100%; 
} 

jsfiddle обновленный

Answer 2

Снимите прокладку с неровными ul с и выровнять их с помощью сверху. Вы можете добавить следующее правило к вашему css

.secondNav, .thirdNav{ padding: 0 !important; top: 5px !important; }

обновленный jsfiddle

Answer 3

Добавить:

$(function(){ 
$(".dropdown-submenu .dropdown-menu").outerHeight($(".dropdown .dropdown-menu").outerHeight()); 
});