因为加了这个属性之后，元素li就变成了绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。因此，四个li都定位到了左上角，就产生了重叠的现象。
注意，定位会覆盖掉css代码中的：float:left让其失效。
【position：absolute 】用法：
将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框。
不要忘记使用left、right、top、bottom的配合定位具体位置。绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。
扩展资料：
【position:relative】和【position：absolute 】的差异。
1、对文档流的影响
relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局。
absolute：元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位。
2、定位原理
absolute：在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位（即html元素）（是父元素没有）。
relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）
参考资料来源：百度百科--position
首页打开dreamweaver或其它编辑器，创建一个名为nav的导航菜单<div class="nav">
<ul>
<li><a href="#">栏目一</a></li>
<li><a href="#">栏目二</a></li>
<li><a href="#">栏目三</a></li>
<li><a href="#">栏目四</a></li>
<li><a href="#">栏目五</a></li>
</ul>
</div>
现在为nav添加样式,首先去掉默认的margin和padding，再去掉<ul><li>标签的list-style样式和<a>标签的默认下划线。接下来再添加适当的样式（根据实际需要添加）进行美化，如一下样式：
<style type="text/css">
* { margin:0padding:0}
ul, li { list-style:none}
a { text-decoration:none}
.nav { border:2px solid #cccborder-right:noneoverflow:hiddenfloat:leftmargin:100px 0 0 300px}
.nav ul li { float:left}
.nav
ul li a
{ width:120pxheight:40pxtext-align:centerline-height:40pxdisplay:blockborder-right:2px
solid #cccbackground:#eeecolor:#666}
.nav ul li a:hover{ color:#f00}
</style>
像这样，一个菜单横向菜单就建好了，下面给栏目一，栏目二，栏目三，添加二级下拉菜单
<div class="nav">
<ul>
<li><a href="#">栏目一</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目二</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目三</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目四</a></li>
<li><a href="#">栏目五</a></li>
</ul>
</div>
添加完二级栏目后，现在开始添加css样式，首先给<li>标签下的<ul>标签添加相对定位，再去除之下<li>标签的做浮动样式，再适当修改<a>标签，如一下样式：
.nav ul li ul { position:absolute}
.nav ul li ul li { float:none}
.nav ul li ul li a { border-right:noneborder-top:1px dotted #cccbackground:#f5f5f5}
接下来隐藏掉二级下来菜单，并给它添加鼠标滑动效果，使得当鼠标滑动到主栏目时，二级下来菜单显示，样式如下：
.nav ul li ul { position:absolutedisplay:none}
.nav ul li ul li { float:none}
.nav ul li ul li a { border-right:noneborder-top:1px dotted #cccbackground:#f5f5f5}
.nav ul li:hover ul{ display:block}
至此，横向二级下拉菜单就制作完成了，这里附加上全部代码
这是因为右边的图片边框压住了左边的图片边框。边框值设置的是1px，margin-left：-1，向左移动1px就可以了。
如果盒子都没有加定位，可以鼠标悬浮时，给盒子加上相对定位relative属性。因为相对定位的盒子会压住普通盒子，位置没有设置偏移量的话就不会动。
