<html>
<head>
<title>立体竖直排列菜单</title>
<style type="text/css">
a{
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
}
#menu{
width:100px;
height:auto;
text-align:left;
}
#menu a:link,#menu a:visited{
color:#fff;
text-decoration:none;
text-align:center;
width:100px;
padding:4px;
margin:4px auto;
background-color:#8ab;
border:2px solid #fff;
border-color:#def #678 #345 #cde;
position:relative;
}
#menu a:hover,#menu a:active{
top:2px;
left:2px;
border-color:#345 #cde #def #678;
}
</style>
</head>
<body>
<div id="menu">
<a href="http://www.ecjtu.jx.cn">首页</a>
<a href="http://www.ecjtu.jx.cn">博客</a>
<a href="http://www.ecjtu.jx.cn">相册</a>
<a href="http://www.ecjtu.jx.cn">下载</a>
<a href="http://www.ecjtu.jx.cn">留言</a>
<a href="http://www.ecjtu.jx.cn">关于</a>
</div>
</body>
</html>
<head>
<title>立体竖直排列菜单</title>
<style type="text/css">
a{
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
}
#menu{
width:100px;
height:auto;
text-align:left;
}
#menu a:link,#menu a:visited{
color:#fff;
text-decoration:none;
text-align:center;
width:100px;
padding:4px;
margin:4px auto;
background-color:#8ab;
border:2px solid #fff;
border-color:#def #678 #345 #cde;
position:relative;
}
#menu a:hover,#menu a:active{
top:2px;
left:2px;
border-color:#345 #cde #def #678;
}
</style>
</head>
<body>
<div id="menu">
<a href="http://www.ecjtu.jx.cn">首页</a>
<a href="http://www.ecjtu.jx.cn">博客</a>
<a href="http://www.ecjtu.jx.cn">相册</a>
<a href="http://www.ecjtu.jx.cn">下载</a>
<a href="http://www.ecjtu.jx.cn">留言</a>
<a href="http://www.ecjtu.jx.cn">关于</a>
</div>
</body>
</html>