幻想藍月 plus!

<div id="navi"> //id 一個網頁只能夠有一個，class可以有多個。

  <ul>

     <li><a href="#">項目一</a></li>

     <li><a href="#">項目二</a></li>

  </ul>

</div>

#navi{width:100%;} //設定寬度，我喜歡用%，用像素真的好討厭 :o

#navi ul li {  
 width:100%;
 text-align:center;
 list-style-type:none; // 讓項目符號前面的．消失，如果要用圖片取代項目符號也要用他
 background-color:#3471B0;
}

#navi ul li a:link, a:visited, a:active {
 color:#FFF;
 text-decoration:none;
}

#navi ul li a:hover {
 color:#000;  //滑鼠經過的時候，文字顏色與背景顏色改變。
 text-decoration:none;
 background-color:#AFB8E0;
 
}

#navi ul li a {
 display:block; //讓有背景色採的地方由文字範圍擴展到整個block。
 padding:5px; //將整個block變大 :D < padding無能研究中 Orz
}

#navi ul li{
 border-bottom:#CCC solid 3px;
 margin-right:3px; //這是美化用的陰影w 把陰影指定在下，3像素 OAO?
}


/*加入以下這串會變成橫的*/

#navi ul li{
 width:20%;
 text-align:center;
 list-style-type:none;
 background-color:#FF9900;
 float:left; /* 讓各個清單元素靠左對齊 */ <Float不會使用 =w=\
 border-bottom:#CCCCCC solid 3px; 
 margin-right:1px;/* 右邊留白1像素 */
}

 ＊ 紅色是不懂部份。