CSS下拉菜单中的文本怎么会自动换行？

<div id="nav">
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">课程大厅</a>
                <ul>
                    <li><a href="">javascriptasdasdglkajg</a></li>
                    <li><a href="">jquery</a></li>
                </ul>
            </li>
            <li><a href="">学习中心</a></li>
            <li><a href="">经典案例</a></li>
            <li><a href="">关于我们</a></li>
        </ul>
</div>
* {margin: 0;padding: 0;}
#nav {background: #eee;width: 600px;height: 40px;margin: 0 auto;}
ul {list-style: none;}
ul li {float: left;line-height: 40px;text-align: center;position: relative;}
a {text-decoration: none;color: #000;display: block;padding: 0 10px;}
a:hover {color: #fff;background: #eee;}
ul li ul li {float: none;background: #eee;margin-top: 2px;}
ul li ul {position: absolute;left: 0;top: 40px;}

为什么 二级菜单中的文字 如果是英文的就不会换行，中文就会换行？