在容器上显示下拉列表项，没有垂直滚动条？

Question

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

这很好，直到尝试在更复杂的Intranet框架中使用它为止。当放置在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</span>
        </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>

任何想法如何在上述框架内获得所需的行为？

提前感谢！

Answer 1

我测试了您提供的代码，但是进行了一次更改，现在看来可以正常使用。

我从.nav中删除了<ul>类，并将ul块包装在div中，然后将您的nav放入其中。 （还删除了不必要的</span>标签）

HTML

<div class="nav"> 
   <ul>
      <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>
</div>

但是，我很确定这不能提供完整的答案，原因是您帖子中的最后一句话：“ 如何在上述框架内获得所需的行为”

尽管您引用了HTML widget，但尚未提供用于进行测试的小部件代码，也未提供有关框架的更多信息。

如果您可以提供代码或提供更多有关“ afor提及的框架的描述/细节”，我将很乐于尝试并扩展此答案。

.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;
}

<div class="nav"> 
    <ul>
      <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>
</div>