本案例和上一个案例相同的HTML结构如下：
<body>
<div id="menu">
<a href="#">Home</a>
<a href="#">Contact Us</a>
<a href="#">Web Dev</a>
<a href="#">Web Design</a>
<a href="#">Map</a>
</div>
</body>
对于#menu容器的设置如下
#menu{
9em; /*宽度*/
margin:0 auto; /*水平居中*/
font-family:Arial, Helvetica, sans-serif; /*字体*/
font-size:14px; /*字号*/
border:1px solid #aaa; /*细灰色边框*/
}
在对#menu的设置中，宽度使用的是相对单位em，而不像上一个例子，使用像素作为单位，代码如下：
#menu a, #menu a:visiten{ /*设置菜单选项*/
display:block; /*设置为块级元素*/
text-decoration:none; /*无下划线*/
color:#000; /*黑色文字*/
line-height:2em; /*高度*/
border:0.5em solid #fff; /*白色背景，防止跳动*/
}
#menu a:hover{
color:#fff;
background-color:#aaa; /*深灰色背景色*/
border-color:#ddd #aaa; /*上下边框浅灰色，左右与背景色相同*/
}
使用相对单位的优势是，当访问者在浏览器调整了文字的大小，#menu容器的大小可以自动调整，以适用文字大小变化。
最终效果如图：
可以看出，这个边框在鼠标指针未经过之前就已经存在了，只是和背景颜色相同，所以看不出边框。而当鼠标指针经过时，边框的颜色发生改变，边框就显现出来了。