>>> 下载【朝花夕拾 – DIV+CSS布局实战系列视频教程】图片素材
上节教程的重点我们放在网站标题文本的样式定义上，其中引入了上下文选择符的用法，它在CSS设计中使用得非常广泛，在之后的教程中我们还是会经常使用到它，当然还有很多其它形式的CSS选择符组合方式。本部分教程的重点主要放在网站导航菜单的构建上，在这个过程中将引入很多新的CSS属性及其用法。首先我们在上节完成的ID为topbar的DIV下面添加一个新的DIV容器：
我们的导航菜单会以无序列表的形式添加到这个DIV中，在那之前先要定义一些CSS，主要是为它定义背景图片。再罗嗦的强调一次，DIV容器本身默认是没有任何高度值的，它会根据其里面的非浮动内容元素进行高度上的自适应，但是光是背景属性是不会使DIV产生这种高度扩展的，所以在CSS中我们必须明确定义它的高度：
#header{
height:154px;
background:url(images/header.jpg) no-repeat;
}
有些朋友可能疑惑了，我们的背景图片高度是158像素，而CSS中为什么是154呢？仔细观察一下header.jpg这张图片，在其底部有一块白色区域，严格来讲这块白色并不能算是背景图片：
解决这个问题的办法不外乎两种，一是把图片重新处理一下，把底部的那片白色裁剪掉，然后你可能就会发现图片的高度就是154像素；第二个办法就是跟我们操作的一样，利用CSS来”裁剪”背景图中多余的部分。当然，最理想的情况就是最初切图的时候，尽量不要出现类似这种细节上的误差，我们也就不必花时间和心思去考虑这些事情了。
接下来我们把导航菜单以列表的形式添加到ID为header的DIV容器中：
很简单的一个结构，预览效果如下：
接下来就是CSS的工作了，首先对UL列表我们定义如下CSS：
#nav{
list-style:none;
padding:119px 10px 0;
}
第一条规则的作用是去掉列表项中默认的小圆点，有些朋友可能在IE等浏览器中没发现这些圆点项目符号，我只能说是这些浏览器自作聪明，大家不妨用火狐浏览器来预览一下未定义#nav样式之前的页面：
所以建议大家设计网页的时候，最好能借助IETester之类的软件在多款浏览器中边制作边进行兼容测试，可能一张网页在火狐中一直好好的，完工之后在IE中打开一看，你就知道”面目全非”这四个字怎么写了…第二条CSS规则的目的是把导航菜单定位到header容器的底部，属性PADDING后面的三个数值分别表示上、左右、下这三个方向的填充空间，当然现在来讲这个效果还是太早了点：
现在将列表项转换为内联元素，使它们同行显示：
#nav li{
display:inline;
}
离最终效果图中的导航外观似乎还有相当大的距离，事实上我们只需要在CSS中再做一点点工作就可以了，为了避免头脑混乱，在这里还是先把CSS全部贴出来，我们再慢慢解释吧：
#nav li a{
color:#fff;
text-decoration:none;
background:url(images/menu1.jpg) repeat-x;
border-left:1px solid #abca74;
border-right:1px solid #abca74;
display:block;
float:left;
height:24px;
margin:0 3px 0 0;
padding:10px 10px 0;
}
事实上也没什么好解释的，文本颜色、文本修饰、背景图片、左右边框等等这些属性就算对于初学者也不是很难的事情。首先必须明确的是，这段CSS的选择符所针对的是列表项中的超链接对象，没有指定:link、:visited等伪类就表示链接的四个状态沿用同一种样式。超链接本身是一种内联级对象，我们利用display强制转换成块级对象之后，就可以自由的控制它的尺寸并应用高度、背景、边框等属性了。当然，成为块级元素之后，会破坏原来预期的导航菜单项同行排列的效果，所以我们在CSS中为链接对象定义了左浮动属性。
最后为菜单添加鼠标经过背景切换效果：
#nav li a:hover{
background:url(images/menu2.jpg) repeat-x;
}
顺便再提一点元素尺寸控制上的问题，本节教程中很多地方涉及到垂直方向上的数值调整，最主要的就是如何让导航精确的定位在header容器的底部，这当中有很多数值在起作用，如#nav的上方填充、#nav li a的高度及其PADDING等，这些属性如何取值并不是去胡乱估计的，我们要下意识的去寻找一些参考，比方154减去119还剩余大概多少像素，这些剩余像素在高度、填充、边界等属性上如何分配等，有了这些思维，我们能节省很多预览调整方面的工作量。