Javascript 子菜单必须是浏览器窗口的全宽

我有一个菜单，在单击父菜单时显示一个水平子菜单。我需要水平子菜单是浏览器窗口的全宽。正如你所看到的，我几乎做到了这一点，但是子菜单现在允许你水平滚动，这看起来很糟糕。这是创建全宽子菜单的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 */ 

---

是否有任何方法可以防止大的水平滚动，但仍保持浏览器窗口的子菜单全宽？

这不是一个超级漂亮的解决方案，但绝对最简单的方法是只设置

overflow-x:hidden在主体上