CSS规则，用于在内容不适合时切换内容

有这样的菜单（用红色矩形强调）

我如何（在纯CSS中）使其具有响应性，以便在没有足够的可用宽度时，菜单变成下拉列表（或者其他更小的东西）

问题不在于实现下拉列表本身，而是如何根据可用空间从一个内容切换到另一个内容

我知道在使用

@media max width

查询时，这很简单，但问题是我不知道“设计时”菜单项的实际宽度，特别是因为文本被翻译和/或更改，导致根据实际显示的语言不同的宽度

---

也许，有一些CSS技巧可以使整个“文本”行/内容在不适合父容器的情况下消失？

我刚刚提出了一个解决方案，可以解决这个问题。我添加了一些样式，使结构更加明显，但它不是像素完美的，你必须注意这一点。全屏运行代码段并调整窗口大小以查看它的运行情况

。表行{
显示：表格行；
}
.表格单元格{
显示：表格单元格；
垂直对齐：中间对齐；
空白：nowrap；
}
.包装纸{
高度：75px；/*菜单的高度，必须将此值定义为水平菜单高度*/
溢出：隐藏；/*这将在屏幕宽度太小时隐藏水平菜单*/
}
.顶置导航{
右填充：120px；/*为右部分留出空间*/
背景颜色：绿色；
颜色：白色；
}
.top_nav_background{/*这是结构其余部分的背景，如果有其他z索引元素，请注意*/
背景颜色：绿色；
高度：85px；
宽度：100%；
位置：绝对位置；
顶部：0px；
z指数：-1；
}
.浮箱{
高度：55px；
填充：10px；
浮动：左；
边框：1px实心#73AD21；
背景颜色：绿色；
}
.h菜单{
高度：75px；
浮动：左；
最小宽度：150px；
背景颜色：黄色；
}
.h-菜单项{
高度：55px；
填充：10px；
边框：1px实心#73AD21；
}
.v菜单{
边缘顶部：20px；
高度：20px；
背景色：红色；
}
.正确的项目{
位置：绝对位置；
右：20px；
顶部：20px；
颜色：白色；
}

左侧部分。
v菜单
右侧部分。

在我做的一个项目中，我提出了一个解决方案，可以显示部分或全部菜单，只在屏幕变小时显示为下拉菜单/侧菜单

子菜单是可选的，您只需使用主菜单即可实现效果

菜单

只需根据您的需要更改各个部分，如果您遇到困难，请留下评论；）

编辑

---

刚刚意识到你不想使用任何媒体查询。我会看看我是否能在这个方向上想出一些东西，而不是头脑发热。

我不知道纯CSS的解决方案，但如果你检查菜单项的高度，你的任务是可能的（如果标签很长，你会有几行文本，所以高度会更高）@你是说使用JavaScript？我看到这个很好，这就是你的意思吗@是的，这似乎是我一直在寻找的解决方案。然而，我真的不明白这是如何工作的，尤其是为什么选择

@media（最大宽度：47.999em）

来隐藏菜单（该值来自何处？），以及是什么使得

类=“pure-u-1 pure-u-md-1-3”

在空间不足时向下移动（从而溢出）。我想这是关于单词包装的，但是澄清一下会有很大帮助。元素的宽度是在渲染后根据其内容（和其他css值）计算的，所以我真的不认为可以基于其他值应用css值（不使用javascript）。您希望在这里使用纯css解决方案的具体原因是什么？js代码不应该很复杂，

float:top不是CSS属性；）
<nav id="top-menu">
  <ul>
    <li class="link menu" tabindex="0">
      Menu
    </li>
    <li class="link">
      <a class="help" href="#">Help</a>
    </li>
    <li class="link">
      <a class="account" href="#">My Account</a>
    </li>
    <li class="sub-nav">
      <nav id="sub-menu">
        <ul>
          <li class="sub-link">
            <a class="details" href="#">My Details</a>
          </li>
        </ul>
        <div id="close-menu" tabindex="0"></div>
      </nav>
    </li>
  </ul>
</nav>