<!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>
