今天我们继续深入学习相关的内容，今天的这个CSS菜单形式上比较炫，在实现的时候有几个需要注重的地方：
1、具体的分析图片格局，确定好背景图片的定位；
2、如何隐藏掉菜单内的链接文字。
21shipin.com原创 下面的图片是今天这个CSS菜单实例的最终效果（可点击放大）：
我们看下面的XHTML代码：
Example Source Code
[www.21shipin.com]<body id="page_a">
<ul id="nav">
<li id="navind"><a href="http://www.21shipin.com/" id="cur1" title="21shipin.com">21shipin.com首页</a></li>
<li id="navxue"><a href="http://www.21shipin.com/" id="cur2" title="Div CSS教程">Div CSS教程</a></li>
<li id="navpei"><a href="http://www.21shipin.com/" id="cur3" title="CSS布局实例">CSS布局实例</a></li>
<li id="navren"><a href="http://www.21shipin.com/" id="cur4" title="CSS2.0教程">CSS2.0教程</a></li>
<li id="navkao"><a href="http://www.21shipin.com/" id="cur5" title="CSS模板下载">CSS模板下载</a></li>
</ul>
</body>
我们赋予了body一个id：page_a。这是用于实现当前页效果的，我们在后面再作说明。
我们建立了一个id为nav的无序列表ul作为菜单的容器。在菜单中有列表项五个。我们作重说说第一个，其它的四个与之类似。
li列表项的id为navind。这是作为列表项的选择符存在的，我们可以通过此选择符控制列表项及列表项内的链接的样式。
21shipin.com原创 a链接的id为cur1。这是方便用于实现当前页的效果。我们后面会介绍如何编写CSS代码。
Example Source Code
[www.21shipin.com]#nav { width:585px; height:55px; overflow:hidden; margin:20px auto 0 auto;}
我们定义无序列表ul的宽度和高度，设置溢出为隐藏，距离顶部20象素，左右方向居中对齐。
我们预先制作好如下的图片，请注重，这是一个图片文件，我们在菜单的不同部分进行不同的定位即可：（可点击放大）
最上面一排是菜单的正常形式，第二排是菜单的鼠标悬停时的形式，最下面一排是当前页的效果。
或许你还没有明白一张图片是如何实现的，我们通过背景图片的定们来实现，看下面的图片：（可点击放大）
我们模拟对菜单进行分割，得到了这样的N个小区域，这每一列就是我们菜单的三个状态，而红线也标出了我们应该如何对菜单进行定位了。我们看下面的表格：
有了这样清楚的思路，我们就可以动手编写CSS代码了。
21shipin.com原创
Example Source Code
[www.21shipin.com]#navxue,#navxue a,#navpei,#navpei a,#navren,#navren a,#navkao,#navkao a {
display:block;
width:116px;
height:55px;
overflow:hidden;
}
除了最左边的21shipin.com这个菜单之外，其它四个菜单的宽度是一致的，我们对其li及链接a进行CSS样式定制，设置为块元素，宽度与高度分别是：116px、55px。设置溢出为隐藏，防止内部元素撑开容器而使页面很难看。
Example Source Code
[www.21shipin.com]#navind a,#navxue a,#navpei a,#navren a,#navkao a {
padding-top:60px;
overflow:hidden;
}
我们设置所有五个菜单的a链接元素的填充距顶为60px。溢出为隐藏。这样我们就成功的实现了将菜单内的文字推到可视区域以外了。即：文字位于距顶部60px的地方，而我们的菜单高度为55px。所以文字是不可见的。仅当用户没有用完全下载CSS文件时，我们的菜单也不会失效，CSS文件未打开图片虽然看不到了，但这些文字就发挥它们的作用了，依然可以起到导航的作用。
Example Source Code
[www.21shipin.com]#nav li { float:left; }
设置所有的li列表项向左浮动。
21shipin.com原创
Example Source Code
[www.21shipin.com]#navind,#navind a {
display:block;
width:121px;
height:55px; float:left;
background:url(nav.jpg) 0 0
}
#navind a:hover { background:url(nav.jpg) 0 -55px }
#navxue a {background:url(nav.jpg) -121px 0 }
#navxue a:hover {background:url(nav.jpg) -121px -55px }
#navpei a {background:url(nav.jpg) -237px 0 }
#navpei a:hover {background:url(nav.jpg) -237px -55px }
#navren a {background:url(nav.jpg) -353px 0 }
#navren a:hover {background:url(nav.jpg) -353px -55px }
#navkao a {background:url(nav.jpg) -469px 0 }
#navkao a:hover {background:url(nav.jpg) -469px -55px }
上面这一大段代码定义了鼠标的两种状态下菜单所表现出来的样子。结合上面两个分析图片，相应你能很快的理解这些代码的意义。只是第一个由于尺寸与其它菜单有所区别，所以单独的定义了宽与高。
Example Source Code
[www.21shipin.com]#page_a #nav #navind a#cur1 {background:url(nav.jpg) 0 -110px }
#page_b #nav #navxue a#cur2 {background:url(nav.jpg) -121px -110px }
#page_c #nav #navpei a#cur3 {background:url(nav.jpg) -237px -110px }
#page_d #nav #navren a#cur4 {background:url(nav.jpg) -353px -110px }
#page_e #nav #navkao a#cur5 {background:url(nav.jpg) -469px -110px }
我们用这些代码实现了CSS当前页的效果。我们所需要做的是给body赋予不同的id，即可实现了菜单背景图片的不同定位，而指示出当前页是在哪一个栏目。
QQ：2693987339(点击联系)购买教程光盘
:
