Css 如何溢出：在sticky div上滚动

我正在创建一个WordPress主题，我想制作一个带有溢出的水平菜单：滚动。当我试图这样做时，它要么不起作用，要么隐藏了内容

下面我发布代码

HTML:

.container
{
高度：100vh；
}
身体
{
背景颜色：灰色；
}
#导航菜单
{
位置：粘性；
高度：70像素；
文本对齐：居中；
溢出：滚动；
边框顶部：1px纯白；
}
#导航菜单{
列表样式类型：无；
保证金：0；
填充：0；
文本对齐：居中；
最小宽度：100%；
}
#navmenu li{
浮动：左；
字体大小：14px；
文本对齐：居中；
}
#纳维利{
显示：内联块；
/*颜色：白色*/
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
#导航菜单a：悬停
{
背景色：#111；
}
标志
{
高度：50px；
浮动：左；
}

将导航包裹在具有定义宽度的附加div中。请参阅代码片段：

.container{
高度：100vh；
}
身体{
背景颜色：灰色；
}
#导航菜单{
位置：粘性；
高度：70像素；
文本对齐：居中；
溢出：滚动；
边框顶部：1px纯白；
}
#导航内{
宽度：10000px；
}
#导航菜单{
列表样式类型：无；
保证金：0；
填充：0；
文本对齐：居中；
最小宽度：100%；
}
#navmenu li{
浮动：左；
字体大小：14px；
文本对齐：居中；
}
#纳维利{
显示：内联块；
/*颜色：白色*/
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
#导航菜单a：悬停{
背景色：#111；
}
.标志{
高度：50px；
浮动：左；
}

问题的作者已经澄清（见评论），他们希望整个页面水平滚动，而不仅仅是导航栏

这里有一个JSFiddle解决方案：JSFiddle.net/qwjshv9s/1

此解决方案分为两部分

不要让身体以外的任何东西滚动

清除所有

溢出：滚动显示的
属性，并将
溢出-x:auto
放在正文本身上

不要让菜单自动换行
将
空白：nowrap
应用于
并将
元素从
浮动：左
切换到
显示：内联块

--

顺便说一下，要仅允许水平滚动，您可以使用：

overflow-x: scroll;

这只允许在X轴上滚动。如果你不想滚动条总是在那里，你可以这样做

overflow-x: auto;

只有在需要时才会滚动。
演示中的菜单会滚动。。？是否希望菜单与页面的其余部分一起移动？溢出的目的是什么：滚动；在这里看起来满满的。位置：sticky仅在ff和chrome中有效，如果你允许实验性CSSI意味着将菜单保持在一行中，无论发生什么，都可以作为响应菜单，但这两种方法都不适用于我。菜单不是水平滚动@ovokurook，要触发粘性，你还需要在它应该粘贴的位置设置一个坐标（顶部：0；否则）你的意思是什么？在#导航菜单部分？作为WordPress主题还是可以的吗？我的意思是WordPress会把它识别为菜单吗？老实说，我不确定，你必须做一些测试。我不知道用CSS实现你想要的东西的其他方法，对不起！很好，非常感谢。但老实说，我对这个解决方案有些问题。它在“RunCodeSnippet”中工作得很好，但当我在实际的代码编辑器中尝试并保存它时，它实际上不起作用。这可能是什么？我不可能回答，因为我无法接触到你看到的东西。试试布伦顿的答案。可能在没有额外容器的情况下向导航添加较大的宽度会起作用。感谢您的回答，我已经尝试过了，但不幸的是，当我缩小窗口而不是显示滚动条时，它会隐藏我的内容。两种解决方案的工作原理基本相同，它们只是隐藏内容而不是制作滚动条。原因可能是什么？你是不是想让滚动条出现在屏幕上？当滚动条没有被积极使用时，许多浏览器会在视觉上隐藏滚动条。如果你想确保它是可见的（不仅仅是技术上的），那完全是另一个问题。不，我的意思是滚动条没有问题，当我缩小窗口时，内容只是被剪切了。没有办法真正滚动它。无法放入窗口的站点部分消失了。下面是一个JSFIDLE演示，使用我建议的
width:1000px
解决方案：。导航菜单的内容比页面宽，并且溢出。但您可以水平滚动查看它。这就是你想要的，还是你另有打算？