你看到的下面的五颜六色的菜单中， 只不过是一个有一些一些P元素在内的DIV元素。 这样的视觉效果源于 每个P元素都单独定位，并有自己的字体和颜色。它应用于短的文本为最佳，因为视觉效果是基于重叠的，如果文本过长， 重叠过多，就会变得难以阅读。
注意DIV元素被定义为class map，它使得该元素成为菜单的容器，和P元素的ID属性。每个P元素都必须有一个（不同的）ID，称为P1，P2，...P10。 ID不必按照顺序使用（如例子所示）。你可以将样式表复制到你自己的样式表，或用@import 或用link元素去直接从W3C网页导入map.css
下面介绍样式表的使用。首先，样式表将DIV元素界定class map。它创建了一个190px高的空间，P元素将被放置其中。 每一个具有ID的P元素，从P1到P10便被给于颜色和字体，每个元素都依据边距属性被置于由DIV创造的空间中： 一 个负的顶端边距将元素移到的DIV元素空间，一个正的底端边距确定了下一个元素从DIV的底部重新开始。
当然，你可以自由地更改样式表来尝试不同的字体、颜色和位置，或额外建立可以超过10个元素的样式规则。 再来看 看DIV的左、右边距：他们都被给于负值，因而菜单比周围的文本宽，但在你的页面上，边距未必足够宽，所以你可能需要删除这些规则。
正确地执行CSS将读取两种样式表，但第二个规则会覆盖第一个规则。因此，除了一点不必要的工作，并没有什么改变。 但是，Netscape 4不会加载第二个它不识别的样式表，因为其media属性。
此外，你可能会问，为什么元素是给与负值来定位，而似乎用 绝对定位属性更为合适。事实上，用position和left和right＂可 以达到同样目的。这个样式表之所以使用边距定位，是因为这样做它可以在只执行CSS１的浏览器中运行。
