DIV CSS菜单实例：红与黑 具有立体质感的CSS菜单

运用UL及LI构建菜单，不但速度上比较快，而且语义更明确，对搜索引擎也非常友好，但很多朋友认为制作起来比较烦，其实不然，CSS菜单的制作其实是非常简单的，今天的这款菜单思路非常简单，但效果还算不错，看下面的效果图：

　　这与前面所介绍的一些菜单有相似之处，我们不难看出，些微的改变就可以制作出不同的效果，你也可以学习前面我们的一些案例，进一步加深菜单制作的有关知识。

　　

　　我们看今天这款菜单的制作过程，首先看看XHTML代码：

Example Source Code [www.52css.com]???? <li title="">Div+CSS教程</a></li>
???? <li><a href="http://www.52css.com/" title="">CSS布局实例</a></li>
???? <li><a href="http://www.52css.com/" title="">CSS2.0教程</a></li>
???? <li><a href="http://www.52css.com/" title="">CSS酷站欣赏</a></li>
???? <li><a href="http://www.52css.com/" title="">CSS模板下载</a></li>
</ul>

　　没有什么特别之处，需要注意的是我们为第二个列表项“Div+CSS教程”指定了一个类style="" src="/img/2012/11/06/1653004198.gif"> Example Source Code [www.52css.com] Example Source Code [www.52css.com] Example Source Code [www.52css.com] Example Source Code [www.52css.com]#menu li a:hover,#menu li.current {
???? background:#fff url(52css.com_a.png) 0 0 repeat-x;
}

　　设置链接A的悬停样式，以及当前页的样式。请注意，这两种状态下它们的表现是一样的，所以我们用群组选择器：“#menu li a:hover,#menu li.current”一次性设置。背景色为白色，背景图片为“52css.com_a.png”，位于0 0，水平方向重复。

　　好了，致此我们这款菜单的制作就结束了，我们看看最终的效果：点此查看