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

我在做一个有二级菜单的导航条，结果见http://jsfiddle.net/jwmguLys/点击预览
HTML：

<div id="main">
    <ul class="nav">
        <li><a>title 1</a></li>
        <li><a>title 2</a></li>
        <li>
            <a>title 3</a>
            <ul>
                <li><a>subtitle 1 subtitle 1</a></li>
                <li><a>subtitle 2 subtitle 2</a></li>
            </ul>
        </li>
    </ul>
</div>

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时，效果如下图：

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