<!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=gb2312" />
<title>纯CSS+DIV实现的竖向菜单</title>
<style>
.menu{
width:200px;
}
.menu a,.menu a:visited{
text-decoration:none;/*文字无下滑线*/
text-align:center;/*文字水平居中对齐*/
color:#c00;/*红色文字*/
display:block;/*设置为块状元素*/
padding:4px;/*内边距*/
background:#FFF;/*背景色*/
border: 1px solid #fff;/*与背景色相同边框，防止跳动*/
width:130px;
position:relative;/*使用相对定位*/
}
.menu a:hover{
border:solid 1px #c00;/*边框颜色红色*/
}
.menu a span{
display:block;/*设置为块状元素*/
position:absolute;/*使用绝对定位*/
width:0px;/*宽度为0*/
height:0px;/*高度为0*/
border:solid 8px #fff;/*设置默认边框样式*/
top:4px;/*竖直方向的定位*/
overflow:hidden;
}
.menu a span.left{
border-left-color:#c00;
left:8px;
}
.menu a span.right{
border-right-color:#c00;
right:8px;
}
</style>
</head>
<body>
<div class="menu">
<a href="#">
<span class="left"></span>
首页
<span class="right"></span>
</a>
<a href="#">
<span class="left"></span>
新闻
<span class="right"></span> </a>
<a href="#">
<span class="left"></span>
产品
<span class="right"></span>
</a>
</div>
</body>
</html>
