CSS导航子菜单帮助。。。块离开屏幕

我在为我哥哥的新管道公司工作，我的导航菜单有两个问题。我从一个教程网站上复制了一些CSS，并试图根据自己的喜好对其进行修改，但我不明白为什么会发生这种情况。当我将鼠标悬停在顶级菜单项上（本例中为“服务”）时，子菜单会按其应有的方式显示，但LI的背景会延伸到屏幕之外。我曾尝试在CSS的不同区域更改/设置宽度，但我有限的知识让我感到头疼。我有一个临时站点，但我正在本地使用媒体查询测试这个新版本

它不会让我发布没有10个声誉的截图，所以这里有一个链接：

HTML：

<nav>
  <ul>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a>
      <ul>
        <li><a href="#">Leak Detection</a></li>
        <li><a href="#">Water Heaters</a></li>
        <li><a href="#">Plumbing Fixtures</a></li>
      </ul>
    </li>
    <li><a href="#">Reviews</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

---

我确实有另一个问题，但如果我能解决这个问题，我将在下一个问题。如果您能提供任何帮助，我将不胜感激

你要找的是

最小宽度：550px。这将导致所有
扩展到最小宽度
550px

把这个拿出来可以解决问题。我想那是为了
nav
阻止它变小，在这种情况下，你应该把它放在
nav
下，而不是
nav ul
下



将
最小宽度
放在正确的位置：

nav {
    min-width: 550px;
}

你搞定了！谢谢你，鲁迪！这么简单，没问题！快乐编码！
nav {
    min-width: 550px;
}