製作網頁時，很多人會想要讓網頁選單擁有下拉的功能，因為這樣感覺比較炫，不過要製作下拉選單的選單可不容易，因為如果不太會CSS，那弄起來可是很頭大的。現在你不用再煩惱這樣的問題了，因為有現成的工具「Pure CSS Menu Maker」，只要滑鼠點一點，就可以產生多層的下拉選單。

這個Pure CSS Menu Maker選單製作軟體是完全免費的，可以製作多層的選單，而且不需使用Javascript，完全純CSS就達到的選單，是一個不可多得的好工具。透過滑鼠點擊設定，就可以輕鬆完成下拉選單，你完全不需去考慮瀏覽器相容問題，因為他都幫你處理好了，在各大新版瀏覽器都可以正常使用喔！

平常想要製作多層選單，想必大家就會開始拼命Google多層選單，找找看有沒有人分享語法？不過現在不用這麼麻煩了，只要利用「Pure CSS Menu Maker」這個小巧的軟體，就可以產生兩層、三層、四層以上的選單都不是問題。而且我們也不需去擔心瀏覽器相容性問題，目前它支援IE8以上、Chrome、Safair、Opera、Firefox等等。

不過眼尖的朋友會發現，奇怪？那IE7、IE6支援嗎？喔~真不巧，他不支援IE7和IE6，所以使用這軟體產生選單前可能要稍微注意一下，它不相容於IE7以下的IE瀏覽器，這是比較可惜的地方，如果未來大家使用IE8一定是個趨勢，而且很多大網站也漸漸不支援IE6，所以就放心地使用吧XD！

• 軟體名稱：Pure CSS Menu Maker
• 軟體性質：免費軟體
• 軟體語言：英文
• 官方網站：http://cssmenu.com
• 軟體下載：按這裡

第1步 開啟軟體後，點擊左方的按紐新增專案。

第2步 接著請選擇選單類型，然後設定儲存路徑，最後點擊﹝Okay﹞產生選單。

• Horizontal：橫式
• Vertical：直式

第3步 產生選單後，預設會有一些選單，可以透過左上方的選單按鈕進行新增、刪除或修改選單，中間區塊是調整樣式，右邊是即時預覽。

第4步 在中間部分，這是調整樣式以及選單網址的部分，你可以點擊【Content】進行選單名字修改(Text)或是加入網址(URL)以及選擇開啟的方式(Target_Frame)。

第5步 切換到【Style】，可以調整選單的樣式，例如文字的粗細、選單高寬、字型、字體大小等等。當然這部分還有子項目可以切入設定，像是選單的顏色等等，大家可以自己點點看、摸摸看喔！

第6步 當你設定都完成後，可以點左上角的磁片進行儲存檔案，然後再點﹝Generate Menu﹞產生選單！

值得一提的是雖然可以儲存檔案，可是卻不能開啟已經存在的專案，因為免費版不支援這樣的功能，所以設定選單時要小心，別關掉視窗了。

第7步 點一下「HTML file」連結，就可以立刻使用瀏覽器開啟預視囉！

第8步 以下這是在Chrome下觀看的狀況，選單正常，記得使用一下其他瀏覽器查看一下有沒有正常喔！

第9步 如果在第7步驟點了「Menu folder path」可以開啟原始檔案。裡面有很多檔按，可是實際上影響選單的只有畫面中圈選的檔案，分別是：arrow-down.gif’、arrow-right.gif、cm-style.css、puee-css-menu.htm。

第10步 用Notepad++開啟「puee-css-menu.htm」檔案其中需要的部分只有前面的引入CSS部分，和下方的選單程式碼而已，把它們移植、整合到你的網站，就可以了喔！

相關文章

[教學]如何申請除濕機節能補助(退還減徵貨物稅)？

Line Mobile 月租24元！中華電信隱藏資費方案(附邀請碼+申請教學)

[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告

[教學]如何申請台北捷運誤點證明？

免用Photoshop！Adobe Express 免費線上圖片裁切服務

菲律賓遊學攻略｜語言學校太多難以抉擇？看這篇就對了！

[教學]如何使用花旗信用卡點數折抵帳單？

免註冊帳號！ChatGPT 開放免費使用並且無任何限制！

[教學]如何用 Chrome 批次把 HEIC轉成 JPG 圖片 ？