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;                /* 滑鼠經過串連時的樣式*/
        }