第7章中，介绍了5个竖直方向菜单的制作方法，相信读者可以体会到CSS的功能非常强大。在本章中，我们将制作6个水平排列的菜单。它们也同样各具特色，而且应用了一些CSS设计中非常重要的技术，例如“滑动门”技术。它不仅仅应用在这里，奉书后面的很多案例中，都会看到“滑动门”技术的应用。

这一节要实现一个简单的水平菜单。这个菜单可以随着浏览器窗口宽度的变化而改变排列方式。当测览器窗口宽度不足以容纳所有的菜单项的时候，会自动折行，如图8.1图所示。

该实例文件位于网页学习网CSS教程资源的“第8章\01\horizonral-navi.htm”。

图1 自适应的水甲菜单效果

它的HTML代码依然是第7章多次使用过的最基本的HTML结构，如下所示。

接下来设置#menu容器。这里只需要设置文字的样式就可以了。由于宽度会自动水平适应，因此不需要做额外的设置。代码如下：lodidance.com

下面对菜单项进行设置。代码如下：

在这段代码中，进行了如下设置。

(1) 把a元素设置为块级元素，并设置为向左浮动，这是使菜单项水平排列，并能够自动适应浏览器窗口的关键。

(2) 设置了文字的颜色和样式。

(3) 设置了内外边距。

(4) 设置了上下边框的样式，图中看到的灰色横线就是这里设置的效果。

最后，设置菜单项的鼠标经过效果，将文字的颜色从黑色变为红色，同时将上下两条粗边框变为黑色，以示和其他菜单项的区别，代码如下。

此时在浏览器中的效果已经正确地显示了鼠标经过效果。

最后，请读者慢慢地把窗口由宽变窄，在某一个位置将会出现图1中所示的效果，也就是在菜单项内部发生了折行，这并不是期望的效果。解决办法是在“#menu a, #menu a:visited”的样式中增加如下CSS规则：

这条规则的含义是确保在单词之间的空白处不换行。这时效果如图1所示，图中这两个窗口宽度相同，没有增加这条规则时在菜单项内部折行的效果，图1增加该规则以后的效果。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表