其實一直想要做出下拉式選單或樹枝狀折合選單的，不過一直不得其法。雖然一直以為這兩種都需要 javascript 才能進行，不過竟然給我逛到利用 CSS 來完成下拉式選單的作法。其實有提供這個寫法的似乎不只一個網站，不過我最主要是參考這一篇。
當然我並沒有把他全部的編碼直接拿來用。不過方法說穿了其實也並不困難。
首先要定義三個元素，一個是框框、一個是標題、還有一個是項目，高興用 div、p、h123、或者 li 什麼的都可以。把項目的 display 設定為 none，它就會藏起來。然後把「框框:hover 項目」的display 設定成 block，這樣的意思是說，當滑鼠移到框框上的時候，包在框框元素裡所有定義為項目的元素 display 會變成 block。
然後把標題和項目都放到框框裡，這樣當滑鼠移到標題上的時候，同時也移到了框框上，於是項目就會出現。這時候再把滑鼠從標題移開到項目上時也不會離開框框的範圍，所以項目不會消失。
我使用的編碼拿掉大部分和功能無關的排版設定，簡化過之後如下：
在 CSS 裡定義：

.linkslist {margin: 0px; padding: 0px; }←框框
.linkslist li { display: none; }←讓項目藏起來
.linkslist:hover h2 {width: 200px; }←標題，寬度固定只是要讓它看起來整齊一點。
.linkslist:hover li { display: block; width: 200px; text-align: center; line-height: 140%; }←讓項目顯示出來

在 html 裡這樣寫：

<ul class=”linkslist”>
<h2>站內分類</h2>
<li><a href=”#分類一”>分類一</a></li>
<li>分類二</li>
<li>分類三</li>
<li>分類四</li>
<li>分類五</li>
</ul>