DIVCSS横向菜单实例：简单的思路陷下的风格不错的效果_DIV+CSS实例

　　我们对CSS菜单的介绍也不算少了，可是今天在群里，依然有朋友提出这方面的问题。我不清楚是因为大家没有认真看我的教程，还是因为我在教程内没有向大家介绍清楚，菜单其实是很轻易实现的。

　　在很多时候我们为了追求比较好的页面效果，往往专心的去思考如何编写菜单，怎么样有更好的视觉与用户体验，其实复杂并不见得是一件好事。有时候简单的实现，却能达到很好的效果。我们来看今天的例子：（可点击放大图片）


　　这是一个蓝色底子的导航条，链接文字是白色，非常清爽，当鼠标悬停的时候，链接文字的背景作出了一个陷下的效果。非常简单，但很明显直白的提醒了用户，你的鼠标已经激活链接了，点一下就可以进一步看里面的内容。

　　我们分析一下如何构建这个菜单：

　　XHTML方面：建立一个UL无序列表作为容器，里面的列表项LI作为菜单项目，我们给UL无序列表赋予一个ID，即可通过选择器轻松搞定一切CSS样式编码了。我们无需为每一个LI列表项或A链接再设置任何的ID或CLASS。

　　CSS方面：我们对UL设置宽与高并将它居于窗口的中间，给它一个背景色。对列表项LI设置为浮动。并让LI之间产生一定的外边距，拉开菜单项之间的距离。我们对LI内的链接A，设置鼠标悬停时的背景图片。这个实例基本搞定了。

　　有了上面的分析我们开始动手编码。XHTML代码如下：


　　我们用CSS对此菜单进行样式定制：


　　我们首先进行了整体布局声明，文字大小设置以及去除下划线。我们设置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即左上角，重复方式为不重复。