Css 是否在容器上显示下拉列表项，而不显示垂直滚动条？

创建了一个可单击或悬停的下拉导航块，此时将下拉子项列表，每个子项也可以单击

在尝试在更复杂的intranet框架（高度依赖AngularJS的LumApps）中使用它之前，它工作得很好。当放置在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>

.导航{
显示：块；
位置：相对位置；
列表样式：无；
字体系列：无衬线；
背景色：#24135f；
颜色：#ffffff；
宽度：30%；
填充：1%；
}
.导航a{
显示：块；
颜色：#ffffff；
身高：100%；
文字装饰：无；
}
.导航：悬停.导航下拉列表{
显示：块；
位置：绝对位置；
左：0px；
顶部：49px；
文本转换：无；
}
.导航下拉列表{
显示：无；
列表样式：无；
填充：0；
位置：绝对位置；
宽度：100%；
背景：#665a8f；
}
.导航下拉菜单a{
填充：10px 15px；
文字装饰：无；
颜色：#ffffff；
}
.导航下拉列表李：将鼠标悬停在a上{
背景：24135f；
}

您知道如何在上述框架内获得所需的行为吗

---

提前谢谢

您是否已经尝试过溢出：可见；在你的导航栏中？删除的答案没有用u你可能想添加一句话，解释小部件的深嵌套和angular的参与u也被提升u希望你很快得到更多有用的建议/解决方案；）@SaHagin是的，

overflow:visible

和

z-order

没有luckI的情况下，我一直在考虑这个问题。。。。提出了两件可能值得检查的事情：1）您可能已经这样做了，但是您是否已经检查了您提到的（多个）父div的样式中可能存在的任何属性？

和

#

\u2）可能更有用：

nav

是一个非常常见的类名，甚至可以被angular。。。如果用不太常见的类名替换

nav

，会发生您想要的更改吗？可能什么都没有（化名）u我只是想大声说出来…）您是否已经尝试过溢出：可见；在你的导航栏中？删除的答案没有用u你可能想添加一句话，解释小部件的深嵌套和angular的参与u也被提升u希望你很快得到更多有用的建议/解决方案；）@SaHagin是的，

overflow:visible

和

z-order

没有luckI的情况下，我一直在考虑这个问题。。。。提出了两件可能值得检查的事情：1）您可能已经这样做了，但是您是否已经检查了您提到的（多个）父div的样式中可能存在的任何属性？

和

#

\u2）可能更有用：

nav

是一个非常常见的类名，甚至可以被angular。。。如果用不太常见的类名替换

nav

，会发生您想要的更改吗？可能什么都没有（化名）u我只是想大声说出来…）