PYovchevski February 2016

Bootstrap submenu - dropdown columns with same height

In bootstrap -submenu (https://vsn4ik.github.io/bootstrap-submenu/) . I want to make the columns of drop-down submenus with the same height. I tried everything, but without success. Can you direct me how I could do it. With illustrations showing the 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        

Answers


Jonathan La'Fey February 2016

Remove the padding from the uneven uls and align them using top. You can add the following rule to your css

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

updated jsfiddle


sTx February 2016

Add this:

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


link2pk February 2016

Remove position relative from .dropdown-submenu & add height 100% and margin-top: 0 to .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

Post Status

Asked in February 2016
Viewed 1,036 times
Voted 9
Answered 3 times

Search




Leave an answer