純 CSS 做出多層選單

雖然可以用 java script 做出多層選單，可是我比較喜歡用純 CSS 來做。一是由於我不太喜歡放太多 script 在網頁裡面，另外一個理由則是，要更換顏色樣式的話，CSS 方便多了。（對了，如果你的網頁選擇要給 IE 看的話，就只能選 java 囉）
參考這裡有垂直和水平的選單給你選。這一頁是放在網頁的程式碼，在 menu example 裡面則有需要的 css 檔案。
From：http://qrayg.com/learn/code/cssmenus/

HTML 程式碼：

<ul id="navmenu-h">
<li><a href="#">Root nav item</a>
     <ul>
     <li><a href="#">Sub nav item</a></li>
     </ul>
</li>
</ul>

上面可以看出來，是用無序序列（ul、li）來做出來的。由於正常的序列都會有編號符號（無序序列是符號，有序的則是1234），所以需要在 CSS 裡面設定 list-style（因為你不會希望在選單上有圓點的符號吧）。再來就是利用 display block 的方式，在滑鼠滑到選單上的時候，顯示下一層的選單（因為用的是 hover 的方式，所以 IE 就看不到囉）。這樣就好囉。雖然預設的 CSS 是四層的，不過你要改成幾層也可以啦。
範例連結：這裡是垂直跟水平選單的示範。示範的下面則有不同選單的 CSS 和 java script 的原始碼。
Mirror：
水平選單：CSS、java
垂直選單：CSS、java

Please follow and like us: