<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}
至此，横向二级下拉菜单就制作完成了，这里附加上全部代码
具体解释见这里：http://www.w3school.com.cn/css/pr_class_position.asp
下面我从实际使用中说一下：
【static】定位模式用的不多，既然他的意思是没有定位，通常就不实用他。但css是层叠样式表，所谓层叠，意思就是哪个属性离当前html元素最近就执行那个属性。所以，同级选择器时css的行越往下权重越高。id比class的权重高。行内css权重大于页内css大于文件css。那么，如果起初定义过定位属性，后面又需要取消定位属性，在保证css结构的情况下，可以用这个属性来重置定位（取消起初定义的定位）。
【绝对定位absolute】绝对定位的意思是，不使用外边距和内边距修饰的定位。所以，你可以看到外边距是：margin-【left、right、top、bottom】，内边距是padding-【left、right、top、bottom】，而绝对定位只有【left、right、top、bottom】，所以就是绝对定位，绝对定位默认情况下是参照浏览器的窗口大小的。但，如果其父级元素有定位属性，则参照其父级元素的左上角。绝对定位会丢失元素自身的宽高值和原始位置，漂浮于其他层上方或下方。
【相对定位relative】相对定位是参照附近的元素进行定位，他可以使用内外边距，也可以使用绝对的方位值，和绝对定位不同的是，相对定位会保留元素自身的尺寸位置，而不浮动定位。
【关于绝对定位和相对定位】通常建议：
如果是全屏内容，可以直接使用绝对定位，如弹窗、浮动回到顶部、客服等
如果是希望固定区域内自由布局，则需要对父级指定相对定位属性（或者绝对定位属性）。
绝对定位的元素和其他元素出现了遮挡，可以为其他元素设置相对定位属性，同时设置z-index的值。
【固定定位fixed】fixed是把某个元素按照固定的位置呈现，它也是参照浏览器窗口的，和绝对定位差不多，但又不同，不同之处在于，他不随窗口的滚动移动位置。常用于固定导航条和回到顶部等模块中。
具体的，你可以写一个练习文件，中间放置一个960*960的div，设置下背景色，居中对齐，里面放置9个小div，设置宽度高度，外面放置4个div，也设置宽高。
中间的大div给予相对定位属性，里面的9个小div设置绝对定位，分别调整9个div为左上角、顶部居中、右上角、右侧垂直居中、右下角、底部居中、左下角、左侧垂直居中和绝对居中。
外部的四个div分别尝试使用绝对定位、相对定位和固定定位。
最后使用static重置一下。然后找一个游戏界面（自由零散布局），大致看下他的界面布局，理解下如何布局，然后看一些UI界面（自由规矩布局），理解下，最后回到网页（绝对规矩布局）。理解了这些，就可以用html当PS玩了。
float两个元素绝对靠紧，需要使用到margin和padding重置（有专门的css reset，来重置html元素的默认属性，html默认是有属性的，每个浏览器都不一样），重置后试试，实在不行尝试下使用 * {margin:0padding:0}（不建议使用）。
由于广告的滥用，使得一些浏览器软件都开始有了广告内容拦截，使得一些很好的效果现在都不推荐使用了。比如让一个元素可能随着网页的滚动而不断改变自己的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果，这个元素属性就是曾经不被支持的position:fixed他的含义就是：固定定位。这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。
虽然原来的浏览器并不支持过个属性，但是浏览器的发展使得现在的高级浏览器都可以正确的解析这个CSS属性。并且通过CSS HACK来让IE6都可以实现这样的效果（目前无法使IE5.x）实现这种效果。
CSS元素绝对定位、相对定位 布局和浮动等
1. position:static|无定位
position:static是所有元素定位的默认值, 一般不用注明，除非有需要取消继承的别的定位
example:
#div-1 {
position:static
}
2. position:relative|相对定位
使用position:relative，就需要top,bottom,left,right4个属性来配合，确定元素的位置。
如果要让div-1层向下移动20px,左移40px:
example:
#div-1 {
position:relative
top:20px
left:40px
}
如果用到相对定位，紧随他的层divafter是不会出现在div-1的下方，而是和div-1在同一个高度出现。
可见， position:relative并不是很好用。
3. position:absolute|绝对定位
使用position:absolute,能够很准确的将元素移动到你想要的位置，
让我将 div-1a 移动到页面的右上角:
example:
#div-1a {
position:absolute
top:0
right:0
width:200px
}
使用绝对定位的div-1a层前面的或者后面的层会认为这个层并不存在，丝毫不影响到他们。所以position:absolute用于将一个元素放到固定的位置很好用，但是如果需要div-1a层相对于附近的层来确定位置就不要实现了。
*这里有个Win IE的bug需要提到，就是如果为绝对定位的元素定义一个相对的宽度，那么在IE下它的宽度取决于父元素的宽度而不是整个页面的宽度。
4. position:relative + position:absolute|绝对定位+相对定位
如果给父元素(div-1)定义为position:relative子元素(div-1a)定义为position:absolute，那么子元素(div-1a)的位置将相对于父元素(div-1)，而不是整个页面。
让div-1a定位于div-1的右上角：
example:
<div id=div-1>
<div id=div-1a>
this is div-1a element.
</div>
this is div-1 element.
</div>
#div-1 {
position:relative
}
#div-1a {
position:absolute
top:0
right:0
width:200px
}
5. two column layout|两列布局
让我们实践position:relative + position:absolute的理论，实现两列布局。
example:
<div id=div-1>
<div id=div-1a>this is the column-one</div>
<div id=div-1b>this is the column-two</div>
</div>
#div-1 {
position:relative/*父元素相对定位*/
}
#div-1a {
position:absolute/*子元素绝对定位*/
top:0
right:0
width:200px
}
#div-1b {
position:absolute/*子元素绝对定位*/
top:0
left:0
width:200px
}
注意，在这个例子中会发现父元素的高度不会随着子元素的高度变化，所以如果父元素的背景和边框需要定义一个足够高的高度才能显示出来。
6.float|浮动对齐
使用float定位一个元素有float:left&float:right两种值。这种定位只能在水平坐标定位，不能在垂直坐标定位。而且让下面的元素浮动环绕在它的左边或者右边。
example:
#div-1a {
float:left
width:200px
}
7.make two clumn with float|浮动实现两列布局
如果让一个元素float:left另一个float:right控制好他们的宽度，就能实现两列的布局效果。
example:
#div-1a {
float:left
width:150px
}
#div-1b {
float:left
width:150px
}
8.clear float|清除浮动
如果你不想让使用了float元素的下面的元素浮动环绕在它的周围，那么你就使用clear,clear有三个值，clear:left(清除左浮动)，clear:right(清除右浮动)，clear:both(清除所有浮动)。
example:
<div id=div-1a>this is div-1a</div>
<div id=div-1b>this is div-1b</div>
<div id=div-1c>this is div-1c</div>
#div-1a {
float:left
width:190px
}
#div-1b {
float:left
width:190px
}
#div-1c {
clear:both
}
至此，这个css的定位部分就结束了，你可以动手体会体会加深印象。
