人生路漫,与你相伴...

<style type="text/css">
#navitest {
width:450px;
}
#navitest ul li {
/* 設定清單文字範圍的寬度 */
width:150px;
/* 讓清單文字居中對齊 */
text-align:center;
/* 去除清單文字前面的小圓點*/
list-style-type:none;
/* 設定背景色 */
background-color:#FF9900;
}

#navitest ul li a:link {
color:#FFFFFF;
text-decoration:none;
}
#navitest ul li a:visited {
color:#FFFFFF;
text-decoration:none;
}
#navitest ul li a:hover {
/* 文字為白色 */
color:#FFFFFF;
/* 文字沒有裝飾（底線） */
text-decoration:none;
/* 背景為橙紅色 */
background-color:#FF6600;
}
#navitest ul li a:active {
color:#FFFFFF;
text-decoration:none;
}

#navitest ul li a {
/* 充滿整個區塊 */
display: block;
/* 擴大區域內部空間 */
padding:5px;
}

#navitest ul li{
width:150px;
text-align:center;
list-style-type:none;
background-color:#FF9900;
/* 讓各個清單元素靠左對齊 */
float:left;
/* 設定邊框底部的樣式 */
border-bottom:#CCCCCC solid 3px;
/* 右邊留白1像素 */
margin-right:1px;
}
</style>

<div id="navitest">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">最愛</a></li>
<li><a href="#">收藏</a></li>
</ul>
</div>