css立体菜单

来源：互联网发布：为什么mysql 编辑：程序博客网时间：2024/05/16 01:45

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<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:10em; /*宽度*/

padding:0.25em;/*内边距*/

margin:0.5em auto;/*菜单项之间间隔0.5em，并水平居中*/

background-color:#8ab; /*背景色*/

border:2px solid #fff;/*边框粗细2像素*/

border-color:#def #678 #345 #cde;/*边框颜色显示突起效果*/

position:relative;/*使用相对定位*/

}

#menu a:hover {

top:2px;/*向下移动2像素*/

left:2px;/*向右移动2像素*/

border-color:#345 #cde #def #678;/*边框颜色显示突起效果*/

}

</style>

<body>

<a href="#"> Contact Us</a>

<a href="#"> Web Design</a>

</div>

</body>

</html>