CSS实现自适应斜角水平导航菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>自适应的斜角水平菜单</title>
<style type="text/css">
.menu {
font-family:Arial;
font-size:14px;
}
.menu a,.menu a:visited {
display:block;
float:left;
position:relative;
background-color:#CC0000;
color:#FFFFFF;
text-decoration:none;
padding:6px;
margin:1px 0 0 1px;
}
.menu a .corner {
position:absolute;
height:0;
width:0;
overflow:hidden;
border-bottom:solid 6px #CC0000;
border-left:solid 6px #FFFFFF;
top:0;
left:0;
}
.menu a:hover {
background-color:#FF9900;
color:#333333;
}
</style>
</head>
<body>
<div class="menu">
<a href="#">
<span class="corner"></span>Home</a>
<a href="#">
<span class="corner"></span>Connect</a>
<a href="#">
<span class="corner"></span>Web Dev</a>
<a href="#">
<span class="corner"></span>Web Design</a>
<a href="#">
<span class="corner"></span>Map</a>
</div>
</body>
</html>
CSS实现自适应斜角水平导航菜单