本案例仍然使用和上一个案例相同的HTML结构，基本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 {
font-family:Arial, Helvetica, sans-serif; /*字体*/
font-size:14px; /*字号*/
}
菜单项的普通状态设置，代码如下：
#menu a,#menu a:visited {
text-decoration:none; /*设置下滑线*/
text-align:center; /*文字水平居中*/
color:#fff; /*白色文字*/
display:block; /*设置块级元素*/
width:10em; /*宽度*/
padding:0.25em; /*内边距*/
margin:0.5em auto; /*菜单项之间间隔0.5em，并水平居中*/
background-color:#8ab; /*背景色*/
border:2px solid #fff; /*边框*/
border-color:#def #678 #345 #cde; /*边框颜色显示突起效果*/
position:relative; /*使用相对定位*/
}
position:relative; /*使用相对定位*/
注意 所谓相对定位，是指类似定位元素自身所在的位置为基准，平移制定的距离。
#menu a:hover{
top:2px; /*向下移动两像素*/
left:2px; /*向右移动两像素*/
border-color:#345 #cde #def #678; /*边框颜色显示凹陷效果*/
}
到这在浏览器中显示效果如图：
“top：2px” 的含义是，距离上界2个像素。由于原来鼠标指针未经过时，距离上界时0像素，因此产生的效果就是向下移动了2个像素。一次类推，“left:2px” 的效果是向右移动2个像素。由于前面已经设定定位方式为相对定位，因此这里的移动式以自身原来的位置为基准进行的。
为了实现凹陷的视觉效果，需要将上下边框的颜色交换，左右边框的颜色交换。这样，这个立体菜单的效果就完成了。
