我们对CSS菜单的介绍也不算少了，可是今天在群里，依然有朋友提出这方面的问题。我不清楚是因为大家没有认真看我的教程，还是因为我在教程内没有向大家介绍清楚，菜单其实是很轻易实现的。
在很多时候我们为了追求比较好的页面效果，往往专心的去思考如何编写菜单，怎么样有更好的视觉与用户体验，其实复杂并不见得是一件好事。有时候简单的实现，却能达到很好的效果。我们来看今天的例子：（可点击放大图片）
这是一个蓝色底子的导航条，链接文字是白色，非常清爽，当鼠标悬停的时候，链接文字的背景作出了一个陷下的效果。非常简单，但很明显直白的提醒了用户，你的鼠标已经激活链接了，点一下就可以进一步看里面的内容。
我们分析一下如何构建这个菜单： XHTML方面：建立一个UL无序列表作为容器，里面的列表项LI作为菜单项目，我们给UL无序列表赋予一个ID，即可通过选择器轻松搞定一切CSS样式编码了。我们无需为每一个LI列表项或A链接再设置任何的ID或CLASS。
CSS方面：我们对UL设置宽与高并将它居于窗口的中间，给它一个背景色。对列表项LI设置为浮动。并让LI之间产生一定的外边距，拉开菜单项之间的距离。我们对LI内的链接A，设置鼠标悬停时的背景图片。这个实例基本搞定了。
有了上面的分析我们开始动手编码。XHTML代码如下：
Example Source Code
[www.21shipin.com]<ul id="nav">
<li><a href="http://www.21shipin.com/" title="">我爱 CSS</a></li>
<li><a href="http://www.21shipin.com/" title="">DIV—CSS</a></li>
<li><a href="http://www.21shipin.com/" title="">布局实例</a></li>
<li><a href="http://www.21shipin.com/" title="">模板下载</a></li>
<li><a href="http://www.21shipin.com/" title="">酷站欣赏</a></li>
<li><a href="http://www.21shipin.com/" title="">Web 标准</a></li>
<li><a href="http://www.21shipin.com/" title="">CSS 手册</a></li>
<li><a href="http://www.21shipin.com/" title="">在线留言</a></li>
</ul>
我们用CSS对此菜单进行样式定制：
Example Source Code
[www.21shipin.com]* {
font-size:12px;
text-decoration:none;
}
#nav {
height:30px;
width:688px;
margin:60px auto;
list-style-type:none;
background:#0046ad;
}
#nav li {
margin:5px 0 0 16px;
float:left;
display:inline;
}
#nav li a {
display:block;
width:68px;
height:20px;
line-height:20px;
text-align:center;
color:#fffeee;
}
#nav li a:hover {
color:#000;
background:url(nav.jpg) 0 0 no-repeat;
}
我们首先进行了整体布局声明，文字大小设置以及去除下划线。我们设置UL无序列表的高宽以及边距，去除列表项预设标记list-style-type:none;。设置背景色为深蓝色#0046ad。LI列表项设置距顶、距左分别为5px、16px。向左的浮动，并将它们内联。
设置菜单链接（#nav li a）为块元素。宽度、高度分别是：68px、20px。我们让链接内的文字垂直居中对齐，所以设置行高为20px。我们设置文字水平居中对齐text-align:center。设置文字颜色为近似于白色的淡黄色#fffeee。
最终我们设置鼠标悬停时（#nav li a:hover）的链接状态，文字颜色为黑色，增加了背景图片nav.jpg并且定位于0 0即左上角，重复方式为不重复。
QQ：2693987339(点击联系)购买教程光盘
:
