html - Bootstrap submenu - dropdown columns with same height -


in bootstrap -submenu (https://vsn4ik.github.io/bootstrap-submenu/) . want make columns of drop-down submenus same height. tried everything, without success. can direct me how it. illustrations showing desired effect (https://gyazo.com/58be79beaae04644a5b1dde6448514b5). thanks.

the code: 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> 

remove position relative .dropdown-submenu & add height 100% , margin-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%; } 

updated jsfiddle


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -