利用項目列表<li>標籤製作導航菜單
效果圖：
<!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>Untitled Document</title>
<style type="text/css">
#box{
width:120px;
font-size:12px;
font-family:"宋體";
}
#box ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#box li{
border-bottom:#ed9f9f solid 1px; /*添加下邊框*/
}
#box li a{
display:block; /*通過該語句，超鏈接被設置成塊元素，當鼠標移動到該塊的任何部分時都會被激活*/
padding:5px 5px 5px 8px;
text-decoration:none;
border-left:12px solid #711515;
border-right:1px solid #711515;
}
#box li a:link{
background-color:#c11136;
color:#ffffff;
}
#box li a:visited{
background-color:#c11136;
color:#ffffff;
}
#box li a:hover{
background-color:#990020;
color:#ffff00;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">音樂MP3</a></li>
<li><a href="#">個人相冊</a></li>
<li><a href="#">我的博客</a></li>
<li><a href="#">我的空間</a></li>
</ul>
</div>
</body>
</html>
