今天在学习《精通css》时碰到一个问题，第六章“对列表应用样式和创建导航条”中的“Suckerfish下拉菜单”中，为了创建导航条的下拉菜单，文中提到的方法是：先设置下拉菜单的position：absolute（注意：此时父级并没有设置position），然后用left:-999em将下拉菜单隐藏到屏幕左边，然后在父列表项中添加鼠标悬停伪选择器，ul li:hover ul{left:auto}，这样，当鼠标移动到父列表项时，就会在合适的位置出现下拉菜单。
html：
<ul class="nav">
<li><a href="#">111</a></li>
<li><a href="#">222</a>
<ul>
<li><a href="#">21</a></li>
<li><a href="#">22</a></li>
</ul>
</li>
<li><a href="#">333</a></li>
<li><a href="#">444</a></li>
</ul>
css:
*{
margin:;
padding:;
}
.nav,.nav ul{
list-style-type: none;
float: left;
background-color: #8BD400;
border:1px solid #486B02;
text-align: center;
}
.nav{
margin:1em;
/* padding: 1em; */
}
.nav li{
float: left;
width: 8em;
}
.nav li ul{
width: 8em;
position: absolute;
left: -999em;
}
.nav li:hover ul{
left: auto;
}
至此，一个用css做的下拉菜单算是大功告成了，那么，真相是怎样的呢？
上面例子中，下拉菜单的position为absolute，但是他的上级并没有设置position，而且他只设置了left:-999em，那么，他是怎么显示的呢？为什么当鼠标移动到父列表项时，将left改为auto后，他能在正确的位置出现呢？如果给他或父级设置padding和margin又会怎么样呢？给他本身设置padding和margin呢？
在知乎找到一篇相关的文章：http://www.zhihu.com/question/20109535有如下的答案：
"1.如果position: absolute 元素未赋予 left、top实际值，那么其值为auto
2.“auto”与“0”在父级元素没有padding值的情况下，表现一样"
"这个div嵌套在body里面，如果不给img设置left和top等值的话，它就相当于没有宽度的浮动元素。如果设置了top和left等值的话，那么它就会去找position为非static得元素做为containing box.这里是body。"
如果下拉菜单的li只给left,top,right,bottom中的其中一个值又会有怎样的效果呢，正如上例中的一样，只给了left值，可以自己试验一下。
他总结的一句话挺好的“例如一个div中有个absolute属性元素，其没有left或是top值，其会像个普通的inline-block属性元素一样静静地呆在这个div 里面，但是一旦设置了left:0;top:0;对不起，这个absolute元素立马变身，直接从DOM tree里面脱离，独立于文档流，结果相对于最近的relative属性的祖先标签定位（如果没有，就body定位）。”。
欢迎各位指教，不胜感激！