css的文本自动换列,CSS绝对定位元素内文本自动换行问题

• title 1
• title 2

• title 3

  • subtitle 1 subtitle 1
  • subtitle 2 subtitle 2

CSS：

* {

margin: 0;

padding: 0;

}

li {

list-style: none;

}

#main {

background-color: blue;

text-align: center;

}

.nav > li {

position: relative;

display: inline-block;

background-color: red;

}

.nav ul {

position: absolute;

}

.nav li li {

text-align: left;

display: block;

}

当我将第一级菜单项.nav > li 添加positon: relative时，效果如下图：

但当我去掉positon: relative时，效果却是这样：

我想知道是什么原因导致了第一种情况下二级菜单的内容自动换行而第二种情况下却没有自动换行。