Создан выпадающий блок навигации, по которому можно щелкнуть или навести курсор мыши, после чего появится список подэлементов, каждый из которых также можно щелкнуть.
Это работало нормально, пока не была использованаэто в более сложной среде интрасети (LumApps, которая сильно зависит от AngularJS). При размещении в виджете HTML нижняя часть списка подпунктов обрезается, и в виджете отображается вертикальная полоса прокрутки.
Состояние покоя и текущее состояние наведения:
Пробовал много вещей, включая настройки z-порядка и переполнения, но не могу найти то, что мешает отображению полного списка подпунктов над контейнером (и всем остальным) под ним.
Как должно выглядеть состояние при наведении:
Мой код по существу:
<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>
Любая идея, как получить желаемое поведение в пределах вышеупомянутогорамки?
Заранее спасибо!