用 ul 和 li 做 menu

網站的 menu 選單，很久以前是拿別人的 javascript 檔來解決，後來看到大家都用 ul 和 li 就輕鬆做出來，也就依樣畫胡盧。javascript 沒辦法完全掌握，但 css 總沒有問題吧，現在終於弄明白了。不過話說現在都有 CSS3 了，可能又有更容易的寫法了。

有很多網頁在解說箇中原由，不過自己做一下筆記總沒錯。

html 基本格式

html 方面，就是

<ul>
<li><a href="">選項一</a></li>
<li><a href="">選項二</a></li>
......
</ul>

css 基本做法（ul）

ul 會為 li 項目帶來圓點、數字各種前置記號，所以首先要讓這些記號不出現：

ul {list-style-type: none;}

最好也去除各瀏覽器的邊距預設值，例如：

ul {list-style-type: none; padding: 0; margin: 0;}

直式（a）

直式是要讓各個連結單位自成一塊（所以跟在連結之後的字，即使在同一個 li 裡，也會折行）。這一塊不是只有字的範圍而已，而是整塊區域，所以可以連帶設定這塊區域的大小，加上 width 或 padding 值：

a {display: block; width: 60px;}

橫式（li）

橫式有兩種做法，對 li 做 inline 或 floating。

inline

li {display: inline;}

li 本身是個 block，設為 inline 是去除這個預設值，讓 li 之間可以連成一行。這時 a 不能加 block。另外，根據 [1]，只對 a 加上 padding、margin，而沒有設定 ul 的，會發生不可測的情形，但我是測不出來，先記下來再說。

此外，inline 的做法不能讓每個 li 的大小一樣，每個 li 的寬度是跟著連結字串的寬度變化。

floating

li {float: left;}
a {display: block; width: 60px;}

要讓每個連結字塊的寬度一樣，要把 li 設為 float，並且 a 也要設為 block 及設定寬度。此外，既然用了 float，在 menu 結束之後，要記得 clear。

多層次 menu

當滑鼠經過某個選項，下面會冒出下一層選單。html 方面，是在 li 下面再跑一圈 ul - li。css 方面，重點是：

ul {list-style: none; position: relative;}
ul li {float: left; position: relative;}
ul li a {display: block;}
ul ul {display: none; position: absolute;}
ul li:hover ul {display: block;}
ul ul li {clear: left;}

不過其間當然可以有很多細節。橫式冒出直式選單，請參考 [2]。直式冒出橫式選單，沒看到什麼好的參考。javascript 請見 [3]。

當然，最好為這一切做個 id 或 class，免得跟其他情形混用。

參考資料

[1] CSS Navigation Bar（初級篇。有清楚的解說及範例。）
[2] Horizontally Centered Drop-Down Menus（進階篇。附解說。）
[3] All Levels Navigational Menu (v3.03)（似乎是好用的 js。可選擇直式橫式。）