Question

我已经检查过10个左右的帖子似乎在问同一个问题，但没有太多清晰度。

我创建了一个包含五个选项的Pure CSS下拉菜单。其中两个选项（选项2和3）包含自己的子菜单：

#topnav_frame {
  color: rgba(245, 245, 245, 1);
  font-size: 1.15em;
  font-weight: bold;
  background-color: rgba(85, 85, 85, 1);
}
#topnav {
  min-width: 1200px;
  max-width: 1200px;
  margin: 0em auto;
  overflow: auto;
  zoom: 1;
  font-size: .75em;
  padding: 0px 10px;
}
#topnav ul.menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
  z-index: 1000;
}
#topnav ul.menu li {
  display: block;
  float: left;
  position: relative;
  width: 160px;
}
#topnav ul.menu li a {
  display: block;
  text-decoration: none;
  padding: 15px;
  background-color: rgba(85, 85, 85, 1);
  color: rgba(255, 255, 255, 1);
  margin-left: 1px;
  text-align: center;
}
#topnav ul.menu li.submenu ul.hidden li a {
  padding: 15px;
  width: 130px;
  text-align: left;
}
#topnav ul.menu li.submenu ul.hidden {
  position: absolute;
  padding: 0;
  margin: 0;
  display: none;
}
#topnav ul.menu li.submenu:hover ul.hidden {
  display: block;
  z-index: 1000;
}
#topnav ul.menu li a:hover {
  background-color: rgba(105, 105, 105, 1);
}

<div id="topnav_frame">
  <div id="topnav">
    <ul class="menu">
      <li><a href="">Home</a>
      </li>
      <li class="submenu"><a href="">Option 1</a>
        <ul class="hidden">
          <li><a href="">View Option 1</a>
          </li>
          <li><a href="">Edit Option 1</a>
          </li>
        </ul>
      </li>
      <li class="submenu"><a href="">Option 2</a>
        <ul class="hidden">
          <li><a href="">Current Option 2</a>
          </li>
          <li><a href="">Option 2 History</a>
          </li>
        </ul>
      </li>
      <li><a href="">Option 3</a>
      </li>
      <li><a href="">Option 4</a>
      </li>
    </ul>
  </div>
</div>

可以查看JS小提琴here。

当我将鼠标放在li.submenu上时会出现问题。菜单下降，但菜单下降到div的“内部”，而不是div的“外部”。 topnav溢出被隐藏，因此滚动条变得可见。如果div，我希望子菜单弹出“外部”。

我已经改变了z-index来反映这个必要的变化（top -av框架的z-index：0和ul菜单和子菜单的z-index：1000。

有什么想法吗？

Answer 1

按预期工作：您在overflow:auto元素上设置#topnav。 如果您将鼠标悬停在选项2或3并向下滚动，则会显示.submenu。

删除它。你必须做一个不同的clearfix。

#topnav {
min-width: 1200px;
max-width: 1200px;
margin: 0em auto;
/* overflow: auto; */
zoom: 1;
font-size: .75em;
padding: 0px 10px;
}

FYI，overflow:auto使得容器外的内部元素不可见，您必须滚动才能看到它。请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

纯CSS下拉菜单（子菜单无法逃脱Div标签）

1 个答案: