立体菜单
<title>立体菜单</title>
<style type="text/css">
#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;
background-color:#8ab;
border:2px solid #fff;
border-color:#def #678 #345 #cde;
}
#menu a:hover{
border-color:#345 #cde #def #678;
left:2px;/*距离左边界是2px*/
top:2px;}/*距离上边界是2px*/
</style>
</head>
<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>
