Html 允许浮动水平菜单使用窗口调整大小，而无需转到新行

我有一个标题，标题下方有一个小横条，作为我网站的主要导航。当窗户是全尺寸时，它工作得非常好。但是，如果窗口的大小调整得再小一点，最右边的菜单就会向下移动到下一行，正如您所期望的任何浮动元素的行为一样

问题：如何使导航栏始终保持在一行，并根据窗口大小适当调整大小？我尝试过将长度更改为百分比，尽管这经常会导致问题，因为CSS有许多组件

以下是所有相关代码：

以下是我认为的罪魁祸首，尽管我可能错了：

.menu2 li {
    position: relative;
    float: left;
    width: 150px;
    z-index: 1000
}

有关上述链接的一些注意事项：

我使用Tiny Drop Down 2（）实现下拉功能（以JS和CSS的形式，在注释中有说明），尽管该下拉功能在JSFIDLE中实际上不起作用。我很确定所有的JS都与我的问题无关

按钮没有与实际的栏垂直排列，但这也不是主要问题，因为这在我的实际站点上没有发生

JSFIDLE中的窗口大小实际上不能容纳按钮的整个长度，因此您会立即看到按钮移动到下一行的问题

---

任何帮助都将不胜感激

您可以通过使用CSS显示模式来实现这一点

只需将ul设置为显示：表格 和要显示的子列表项：表格单元格

表格单元格将自动调整宽度，以填充任意宽度的父表格

您需要从中删除显式宽度

<li>

及

希望这有帮助

<a>