立体菜单
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>立体菜单</title>
<style>
/*设置menu菜单*/
#menu {
font-family:Arial;
font-size:14px;
}
#menu a,#menu a:visited {
text-decoration:none; /*文字无下划线*/
text-align:center;
color:#fff;
display:block;
width:120px;
padding:0.25em;
margin:0.5em auto;
background-color:#8ab;
border:2px solid #fff;
border-color:#def #678 #345 #cde;
position:relation; /*使用相对定位*/
}
#menu a:hover {
top:2px;
left:2px;
border-color:#345 #cde #def #678;
}
</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>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>立体菜单</title>
<style>
/*设置menu菜单*/
#menu {
font-family:Arial;
font-size:14px;
}
#menu a,#menu a:visited {
text-decoration:none; /*文字无下划线*/
text-align:center;
color:#fff;
display:block;
width:120px;
padding:0.25em;
margin:0.5em auto;
background-color:#8ab;
border:2px solid #fff;
border-color:#def #678 #345 #cde;
position:relation; /*使用相对定位*/
}
#menu a:hover {
top:2px;
left:2px;
border-color:#345 #cde #def #678;
}
</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>
</html>
