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
Post a Comment