Отображать элементы выпадающего списка над контейнером, без вертикальной полосы прокрутки? - PullRequest
1 голос
/ 01 ноября 2019

Создан выпадающий блок навигации, по которому можно щелкнуть или навести курсор мыши, после чего появится список подэлементов, каждый из которых также можно щелкнуть.

Это работало нормально, пока не была использованаэто в более сложной среде интрасети (LumApps, которая сильно зависит от AngularJS). При размещении в виджете HTML нижняя часть списка подпунктов обрезается, и в виджете отображается вертикальная полоса прокрутки.

Состояние покоя и текущее состояние наведения: Click or Hover resting state, hover state

Пробовал много вещей, включая настройки z-порядка и переполнения, но не могу найти то, что мешает отображению полного списка подпунктов над контейнером (и всем остальным) под ним.

Как должно выглядеть состояние при наведении: Proper hover state behavior

Мой код по существу:

<style type="text/css">
.nav {
    display:block;
    position:relative;
    list-style:none;
    font-family: sans-serif;
    background-color:#24135f;
    color:#ffffff;
    width: 30%;
    padding: 1%;
}
.nav a {
    display:block;
    color:#ffffff;
    height: 100%;
    text-decoration:none;
}
.nav:hover .nav-dropdown {
    display:block;
    position:absolute;
    left:0px;
    top:49px;
    text-transform: none;
}
.nav-dropdown {
    display:none;
    list-style:none;
    padding:0;
    position:absolute;
    width: 100%;
    background:#665a8f;
}
.nav-dropdown a {
    padding:10px 15px;
    text-decoration:none;
    color:#ffffff;
}
.nav-dropdown li:hover a {
    background:#24135f;
}
</style>
 <ul class="nav">
    <li>
        <a href="#">Click or Hover</a>
        <ul class="nav-dropdown">
            <li>
                <a href="#">Item 1</a>
            </li>
            <li>
                <a href="#">Item 2</a>
            </li>
            <li>
                <a href="#">Item 3</a>
            </li>
            <li>
                <a href="#">Item 4</a>
            </li>
        </ul>
    </li>
</ul>

Любая идея, как получить желаемое поведение в пределах вышеупомянутогорамки?

Заранее спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...