css实现无图片三角形垂直导航条

效果如下：



前台代码：

<div id="Men">
<a href ="addnewbooks.aspx" target="_blank"><span class="left"></span>增加新书<span class="right"></span></a>
<a href ="fengxingbookManager.aspx" target="_blank"><span class="left"></span>更新书库<span class="right"></span></a>
<a href ="fengxingbookManager.aspx" target="_blank"><span class="left"></span>网页动态<span class="right"></span></a>
<a href ="dynamicManager.aspx" target="_blank"><span class="left"></span>促销管理<span class="right"></span></a>
<a href ="fengxingbookManager.aspx" target="_blank"><span class="left"></span>特价管理<span class="right"></span></a>
<a href ="Managerbooks.aspx" target="_blank"><span class="left"></span>书籍浏览<span class="right"></span></a>
</div>

css：

#Men
{
margin: auto;
font-family: 华文行楷;
font-size: 20px;
width: 135px;
padding: 3px;
background-color: #ccc;
border: 1px solid #ccc;
height: 170px;
}
#Men a,#Men a:visited
{
border-left: 8px solid #9ab;
border-right: 8px solid #9ab;
border-bottom: 4px solid #9ab;
display: block;
background-color: #fff;
color: #c00;
text-decoration : none;
position: relative; /*设置为相对定位*/;
width: 120px;
height : 30px; /*设置的列高必须大于span边框的列高*/;
text-align: center;
top: 0px;
left: 0px;
}
#Men a span
{
display: block; /**/
position: absolute; /*相对于a标记绝对定位 */
width:0px;
height: 0px; /* 设置内容为0 只留下边框*/
border: 8px solid #fff; /*定义边框为8个像素 颜色和背景颜色相同*/
top:0px;
overflow: hidden;
}
#Men a span.left
{
border-left-color: #c00; /*显示左边框*/
left: 8px;

}
#Men a span.right
{

border-right-color: #c00;
right :8px; /*显示有边框*/
}
#Men a:hover
{
border-right-style: solid;
border-left-style: solid;
border-right-width: 8px;
border-left-width: 8px;
border-right-color: #808080;
border-left-color: #808080; /* 鼠标经过连接时的样式*/
}