Html 标记内容将转到新行

这是一个Jsfiddle

我有一个ul类

主菜单

，在其中一个

li

，我有一个ul类

子菜单

主菜单中的
a
标记将展开以适应
a
内容，但
子菜单中的
a
标记不会展开

为什么

我试过的
我向
子菜单中的li添加了宽度200px，如下所示

.header ul.sub_menu li{
    position: relative;
    display: inline-block;
    width: 200px;
}

这是可行的，但在我看来，这只是一个变通办法，而不是一个解决方案。我想知道为什么会发生这种情况，以及如何在不设置特定宽度的情况下修复这种情况。因为它在第一个
a
标记中起作用，所以它应该在第二个
a
标记中起作用

非常感谢

更新1
我将背景设置为红色只是为了向您展示我正在使用的
ul
内容。首先，问题的解决方案是将以下设置添加到CSS中。正如我在前面的评论中提到的，这指示浏览器在默认情况下不环绕

.header ul.sub_menu li a{ 
    white-space: nowrap;
}

注意：不需要将其添加到
ul.main_菜单li a
，因为它将应用于
main_菜单下
li
中的所有锚定标签，包括主菜单项（由于我们没有使用
，它将应用于子菜单的
li a
，它们也不是主菜单的直接子菜单）

关于为什么子菜单中的
a
标记被缠绕而主菜单中的标记没有缠绕的问题，这是因为子菜单的
li
标记是绝对定位元素的子元素。请查看关于该主题的漂亮解释

摘录：
元素在从文档流中删除之前获得其宽度和高度。当您绝对定位外部元素时，它将从流中删除，并且由于它没有即时内容，因此它的宽度为0，高度为0。因此，它内部另一个尝试添加文本的division元素将继承父元素的宽度0。因此，它只需扩展到最长单词的宽度以容纳内容，然后将所有其他内容拆分为新行。完成后，它将从文档流中删除元素，并自行关闭

在与此问题相关的代码中，元素以“函数”或“位置”的宽度作为最大宽度（两者几乎相同的宽度）添加
空白：nowrap
到
。header ul.main_menu li a
。这是您需要的吗？这样做基本上会指示浏览器默认情况下不环绕。但是您应该添加
宽度
或
溢出：隐藏
，以确保它不会太宽。@Harry是的，我忘了关于
空白
属性。谢谢。请键入答案以接受它。请说明为什么在第一个
标记中没有
空白
时它可以工作？