发表于：2009/4/26 21:40:16
#0楼
效果如下：
代码如下：
#menu {
font-family:arial; /*设置字体*/
font-size:14px; /*字号子*/
}
#menu a, #menu a:visited {
display:block;
float:left;
position:relative; /*设置为相对定位，目的是为下面的斜角定位做准备，斜角将以此为标准定位*/
background-color:#c00; /*背景色为红色*/
color:#fff; /*字体为白色*/
text-decoration:none; /*去掉链接的下划线*/
padding:6px; /*文字的内边距*/
margin:1px 0 0 1px; /**/
}
#menu a span{ /*这部分代码将产生斜角*/
height:0;
width:0;
border-bottom:solid 6px #c00;
border-left:solid 6px #fff;
position:absolute;
top:0;
left:0;
overflow:hidden;
}
#menu a:hover{ /*将鼠标经过时背影色变色，文字变色*/
background-color: #f90;
color:#333
}
#menu a:hover span{
border-bottom:solid 6px #f90; /*将斜角的颜色跟背景色相同*/
}
自适应的水平的菜单
home
contact us
web dev
web design
map
----------------------------------------------
此篇文章从博客转发
原文地址： Http://blog.gkong.com/more.asp?id=85731&Name=gufeiyan