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

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

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