DIVCSS菜单：超炫的菜单一张图片实现鼠标的两种状态及CSS当前页效果_DIV+CSS实例

　　今天我们继续深入学习相关的内容，今天的这个CSS菜单形式上比较炫，在实现的时候有几个需要注重的地方：
　　1、具体的分析图片格局，确定好背景图片的定位；
　　2、如何隐藏掉菜单内的链接文字。MB5U.com原创

　　下面的图片是今天这个CSS菜单实例的最终效果（可点击放大）：


　　我们看下面的XHTML代码：


　　我们赋予了body一个id：page_a。这是用于实现当前页效果的，我们在后面再作说明。
　　我们建立了一个id为nav的无序列表ul作为菜单的容器。在菜单中有列表项五个。我们作重说说第一个，其它的四个与之类似。
　　li列表项的id为navind。这是作为列表项的选择符存在的，我们可以通过此选择符控制列表项及列表项内的链接的样式。MB5U.com原创
　　a链接的id为cur1。这是方便用于实现当前页的效果。我们后面会介绍如何编写CSS代码。


　　我们定义无序列表ul的宽度和高度，设置溢出为隐藏，距离顶部20象素，左右方向居中对齐。
　　我们预先制作好如下的图片，请注重，这是一个图片文件，我们在菜单的不同部分进行不同的定位即可：（可点击放大）


　　最上面一排是菜单的正常形式，第二排是菜单的鼠标悬停时的形式，最下面一排是当前页的效果。
　　或许你还没有明白一张图片是如何实现的，我们通过背景图片的定们来实现，看下面的图片：（可点击放大）


　　我们模拟对菜单进行分割，得到了这样的N个小区域，这每一列就是我们菜单的三个状态，而红线也标出了我们应该如何对菜单进行定位了。我们看下面的表格：


　　有了这样清楚的思路，我们就可以动手编写CSS代码了。MB5U.com原创


　　除了最左边的mb5u.com这个菜单之外，其它四个菜单的宽度是一致的，我们对其li及链接a进行CSS样式定制，设置为块元素，宽度与高度分别是：116px、55px。设置溢出为隐藏，防止内部元素撑开容器而使页面很难看。


　　我们设置所有五个菜单的a链接元素的填充距顶为60px。溢出为隐藏。这样我们就成功的实现了将菜单内的文字推到可视区域以外了。即：文字位于距顶部60px的地方，而我们的菜单高度为55px。所以文字是不可见的。仅当用户没有用完全下载CSS文件时，我们的菜单也不会失效，CSS文件未打开图片虽然看不到了，但这些文字就发挥它们的作用了，依然可以起到导航的作用。


　　设置所有的li列表项向左浮动。MB5U.com原创


　　上面这一大段代码定义了鼠标的两种状态下菜单所表现出来的样子。结合上面两个分析图片，相应你能很快的理解这些代码的意义。只是第一个由于尺寸与其它菜单有所区别，所以单独的定义了宽与高。


　　我们用这些代码实现了CSS当前页的效果。我们所需要做的是给body赋予不同的id，即可实现了菜单背景图片的不同定位，而指示出当前页是在哪一个栏目。