                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /形形色色的下拉菜单

不明白这是为什么？

将一级菜单的ul li{position:relative;} 相对定位去掉，然后把ul li ul{ position:absolute;}里面的 left:0px 和 top:40px; 去掉之后，感觉显示的结果是一样的啊，不明白为什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0;}
#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;}
a{ text-decoration:none; color:#000; padding:0 10px; height:40px; display:block;}
a:hover{ color:#FFF; background-color:#666;}
ul li ul li{ float:none; background-color:#eee; margin-top:2px;}
ul li ul{ position:absolute; display:none;}
ul li ul li a{ width:80px;}
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="#">javascript</a></li>
                <li><a href="#">jquery</a></li>
            </ul>
        </li>
        <li><a href="#">学习中心</a>
            <ul>
            	<li><a href="#">javascript</a></li>
                <li><a href="#">jquery</a></li>
            </ul>
        </li>
        <li><a href="#">经典案例</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</div>
</body>
</html>