子菜单需要是浏览器窗口的全宽

Question

我有一个菜单，当单击父菜单时会显示一个水平子菜单。我需要水平子菜单是浏览器窗口的全宽。正如您所看到的here，我几乎已经实现了这一点，但是子菜单现在允许您水平滚动，这看起来很糟糕。这是创建全宽子菜单的 css。

ul.dropdown {
  display:none;
  position: absolute;
  top: 26px;
  margin-top: 0;
  background: #333;
  width: 100vw;
  min-width: 100vw;
  padding: 0;
  height: 50px;
  margin-top: 8px;
  left: 0;
  right: 0;
  margin: 0 -9999px; padding: 0 9999px; /* this gets the full width of the sub menu */
  box-sizing: content-box; /* this prevents the li from behaving badly */ 

有没有办法阻止大的水平滚动但仍然有浏览器窗口的子菜单全宽？

Answer 1

这不是一个超级漂亮的解决方案，但绝对最简单的方法是在 body 上设置 overflow-x: hidden;