<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>双竖线菜单</title>
<style type="text/css">
#menu{
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
width:120px;
padding:8px;
background-color:#ccc;
margin:0px auto;
border:1px solid #ccc;
}
#menu a,#menu a:visited{
display:block;
background-color:#fff;
padding:4px 8px;
color:#000;
text-decoration:none;
margin:8px 0;
border-left:8px solid #9ab;
border-right:8px solid #9ab;
}
#menu a:hover{
color:#f00;
border-left:8px solid #000;
border-right:8px solid #000;
}
#menu a#first, #menu a#last{
margin:0;/*由于浏览器的塌陷作用,第一个和最后一个宽度依然保持8px,但是IE中出现兼容性问题*/
}
/*存在兼容问题,在IE中下方的高度还是双倍,在火狐浏览器中显示是正确的*/
</style>
</head>
<body>
<div id="menu">
<a href="#" id="first">Home</a>
<a href="#">Contact</a>
<a href="#">Web DEV</a>
<a href="#">Web Design</a>
<a href="#" id="last">Map</a>
</ul>
</div>
</body>
</html>