为什么加上文字就会自动换行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>下拉菜单</title>
<style type="text/css">
*{margin: 0px; padding: 0px;}
#nav{background-color: #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: red; display: block; padding: 0 10px;}/*去除链接的下划线 字体颜色 a标签变区块 内边距*/
a:hover{color: #fff;background-color: #666;}/*鼠标停滞字体颜色 背景颜色*/
ul li ul li{float: none; background-color: #eee; margin-top: 2px;}/*去除浮动 背景颜色 设置上外边距*/
ul li ul{position: absolute; left: 0px; top: 40px; display: none;}/*绝对定位(要是二级菜单添加内容 一级菜单不会随着二级菜单的增加而增加) 左距离 上距离 隐藏*/
ul li ul li a:hover{background-color:#06f;}/*背景颜色*/
ul li:hover ul{display: block;}/*鼠标经过显示*/
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">java</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">html</a></li>
<li><a href="#">php</a></li>
</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">java</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">html</a></li>
<li><a href="#">php</a></li>
</ul>
</li>
<li><a href="#">经典案例</a>
<ul>
<li><a href="#">java</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">html</a></li>
<li><a href="#">php</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>
<li><a href="#">java啊啊啊啊啊</a></li>为什么加上文字就会自动换行 反而字母不会呢
