Html 当我希望它只横向滚动时，可滚动菜单也会上下移动

我的<nav>菜单应该只滚动到一侧才能查看所有选项，但我注意到，如果你在浏览器中用光标touch 它，特别是在iPhone上，它会上下移动，有时会消失.我不知道是哪处房产造成了这一切.

Html:

<nav class="scrollmenu">
  <ul>
    <li><a href="#starters">STARTERS</a></li>
    <li><a href="#ramen">RAMEN</a></li>
    <li><a href="">MAZEMEN</a></li>
    <li><a href="">TSUKEMEN</a></li>
    <li><a href="">DESSERT</a></li>
    <li><a href="">RAMEN</a></li>
    <li><a href="">DINNER</a></li>
    <li><a href="">DRINKS</a></li>
  </ul>
</nav>

Css:以下内容:

.scrollmenu {
  background-color: rgba(255, 255, 255, 1);
  overflow: auto;
  white-space: nowrap;
  color: black;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 100;
  max-width: 840px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
}

.scrollmenu::-webkit-scrollbar {
  display: none;
}

.scrollmenu a,
li {
  display: inline-block;
  color: rgb(138, 138, 138);
  text-align: center;
  padding: 0px;
  text-decoration: none;
  font-weight: 600;
}

.scrollmenu p {
  display: inline-block;
  color: rgb(138, 138, 138);
  text-align: center;
  text-decoration: none;
}

.scrollmenu a:hover {
  color: black;
}

.scrollmenu a:active {
  color: black;
  text-decoration: underline;
}

ul {
  padding: 0;
  margin: 0;
}

nav li + li:before {
  content: " | ";
  padding: 20px;
}

因此，基本上菜单应该只滚动到一侧，这样您就可以在浏览器窗口中查看所有选项