Question

在bootstrap -submenu（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

添加：

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

Answer 2

从.dropdown-submenu＆amp;中删除相对位置。添加高度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%;
}

更新jsfiddle

Answer 3

从凹凸不平的ul中移除衬垫，并使用顶部对齐它们。您可以将以下规则添加到css

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

更新jsfiddle

Bootstrap子菜单 - 具有相同高度的下拉列

3 个答案: