Липкое выпадающее подменю начальной загрузки начало работать после переполнения: скрытое было удалено - PullRequest
Новая
       37

Липкое выпадающее подменю начальной загрузки начало работать после переполнения: скрытое было удалено

0 голосов
/ 28 декабря 2018

Это мой самый первый вопрос о SO.

Я создал это меню с выпадающими подменю, используя Bootstrap.Также хотелось сделать меню «липким» и преуспеть в этом, добавив переполнение: скрытое для родительского элемента Div. Затем меню стало «липким», как мне хотелось, но при прокрутке вниз оно перестало отображать подменю.У меня закончились идеи и просто удачный выстрел удалил переполнение: скрытый.Волшебным образом все заработало.Почему это так?

Трудно поместить его в Jsfiddle, так что прости меня.

Фрагмент кода: 

<div class="bottom-bar">
    <div class="sticky-container">
        <nav class="bottom-bar-inner" id="navbar">
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a class="nav-link" data-toggle="dropdown" href="#" role="button"
                       aria-haspopup="true" aria-expanded="false">Menu 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                       aria-haspopup="true" aria-expanded="false">Menu 2</a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-submenu">
                            <a class="dropdown-item" tabindex="-1" href="javascript:;">Menu 2.1</a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item dropdown-item2" tabindex="-1" href="javascript:;">Menu
                                    2.1.1</a></li>
                                <li><a class="dropdown-item dropdown-item2" tabindex="-1" href="javascript:;">Menu
                                    2.1.2</a></li>
                                <li><a class="dropdown-item dropdown-item2" tabindex="-1" href="javascript:;">Menu
                                    2.1.3</a></li>
                            </ul>
                        </li>
                        <li><a class="dropdown-item" href="javascript:;">Menu 2.2</a></li>
                        <li><a class="dropdown-item" href="javascript:;">Menu 2.3</a></li>
                        <li><a class="dropdown-item" href="javascript:;">Menu 2.4</a></li>
                    </ul>

                </li>
                <li class="nav-item">
                    <a class="nav-link " href="#">Menu 3</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Menu 4</a>
                </li>
            </ul>
        </nav>
    </div>
</div>
...