下拉式選單是網路上最常見到的效果之一，用滑鼠輕輕一點或是移過去，就出現一個更詳細的選單，它不僅節省了網頁排版上的空間、使網頁佈局簡潔有序，而且一個新穎美觀的下拉式選單，更是為您的網頁增色不少。
製作下拉式選單的方法多種多樣，本期專欄將為您介紹四種常用的製作方法，讓您隨心所欲打造自己的下拉式選單。
■ 用Dreamweaver製作下拉式選單
??Dreamweaver是製作下拉式選單最常用的工具，方法簡單，控制自由，可以最大限度地隨心所欲打造菜單樣式，是製作下拄菜單的必修課。
??用Dreamweaver製作下拉式選單的原理很簡單，它利用了Behaviors（行為）面板中的內建方法Show-Hide Layers（隱藏-顯示層）方法，並用onMouseOver（滑鼠移至）和onMouseOut（滑鼠移開）來觸發層的隱藏和顯示，而將要出現的選單就在圖層中。
??因此，我們可以分四個步驟來製作下拉式選單，首先我們需要一個導航條，它用來放置首先出現在瀏覽者眼前的主選單；然後再製作開始隱藏著而將會出現的下拉選單；接著，進行最關鍵的一步，為主選單和下拉選單添加上隱藏和顯示層的效果；最後，我們進行選單的美化修飾。最終看到的效果如圖，您也可以造訪以下地址： menu.htm
??相信你已經等不急了，那就讓我們馬上開始吧！
一、 導航條的製作
首先進行一些必要的前期工作，按CTRL+J，打開Page Properties（頁面屬性）窗口，參數設定如圖二，這一設定對菜單的位置將有影響，所以請如圖設定。
按CTRL+F2開啟Objects面板，點選圖層按鈕
後在頁面中按住滑鼠不放拖出一個層，然後在層的Properties（屬性）面板中設定各參數，Layer ID框填入title，L、T、W、H框分別填入8、15、 480、15，背景色填入#006699，如圖。
將遊標移至圖層內，點選Objects面板上的表格按鈕
，插入一個一行四列的表格，設定如圖。
按住CTRL鍵不放點取表格的四個單元格，然後設定它們的寬度為120，並在前兩個單元格中輸入文字，就是你的主選單名，可按自己想要的名字輸入，我用"經典論壇"和"天極網"為例，並加上連結。
二、 下拉選單的製作
現在開始製作將要下拉出現的選單，同樣用圖層來製作。
再次從Objects面板插入一個圖層到前面我們做好的導航條的下方，各項參數填為：Layer ID框填入menu1，L、T、W、H框分別填入8、34、120、80，背景色填入#999966，其中L和T兩個參數是設定這個層距離視窗左邊框和上邊框的距離，一定不能填錯，不然選單會錯位，也會影響完成後的可用性。
這時候，我們便可以在menu1這個層中輸入我們所要的選單內容。為了排版方便，我在這裡還是用表格來做菜單。這個圖層將會作為"經典論壇"的下拉選單出現，填入你所需要的選單連結。同樣的方法，再為"天極網"也做一個下拉選單（層menu2）。
這一步要注意的地方就是下拉選單所在的層（menu1、menu2）的位置非常重要（由L和T兩個參數決定）。它們的上邊線應該緊貼導航條的下邊線，這樣才能確保在後面我們完成第三個步驟後，選單能正常使用。因為如果遠離導航條的話，滑鼠一離開導航條，選單就消失了。
按F2開啟LAYER（層）面板，其中列出了網頁中的三個層，點menu1和menu2的前面一格，出現閉著的眼睛圖標，這兩個層便隱藏起來了。操作這一步是因為下拉式選單的初始狀態是不可見的。
三、 顯示和隱藏效果的添加
這一步是化腐朽為神奇的關鍵一步，大家仔細跟我做。
本步驟分為兩部分：第一，對導覽列中的主選單新增控制顯示隱藏的指令；第二，並為下拉選單本身新增顯示隱藏的指令。
1．導航條部分先按CTRL鍵不放點選導航條中的第一個儲存格，現按Shift+F3開啟Behaviors窗口，點
按鈕，在下拉選項中選取"Show-Hide Layers"（如圖）。如果選項中沒有此一項，則選擇Show Events For下的IE 5.0後，重新點按鈕，此時"Show-Hide Layers"將會出現。
這時將會彈出一個窗口，如下圖。在Named Layers框中會列出目前網頁所有的層，選取" layer "menu1" "，因為我們想要menu1這個層對"經典論壇"回應。然後點選下面的"show"按鈕，OK。
這時會回到Behaviors窗口，視窗中出現如下圖所示字樣，點擊Events下的文字"onClick"，會出現一個向下的小箭頭，點擊它，在下拉選項中選取onMouseOver。這一步驟的作用是實現當滑鼠移至第一個儲存格時，下拉選單menu1的狀態變成顯示（Show）。
下一步是讓下拉選單menu2在滑鼠移至第二個儲存格時再變加隱藏狀態。
再點按鈕，在下拉選項中選取"Show-Hide Layers"，在彈出視窗中選取" layer "menu1" "，因為我們想要menu1這個圖層對"經典論壇"回應。然後點下面的"hide"按鈕，OK。
回到Behaviors窗口，點擊向下的小箭頭，在下拉選項中選取onMouseOut。
2．下拉式選單部分先選取層menu1，方法是點選層的邊緣或在LAYER面板中點選menu1，用與導航列部分相同的方法在Behaviors視窗中為它新增顯示與隱藏自己的指令。這樣做的效果是當滑鼠移出層menu1時，層menu1就會自動隱藏。最後層menu1的狀態如圖所示。
3．重複以上兩部分，為導航條的第二個主選單"天極網"和層menu2新增顯示、隱藏層指令。
四、 下拉式選單的美化修飾
到這裡，下拉式選單的功能效果已經實現了，你現在按F12就可以看到。不過你一定也發現菜單有點難看，字不夠精細，菜單選項的默認鏈接色不好看，菜單也沒有邊框，那就讓我們來稍稍為它美容一下。
1．定義選單字體樣式依Shift+F11開啟CSS Style（樣式）面板，點選面板下方的
按鈕
在彈出的"New Style"窗的Tag框內選取td標籤，Type選第二項Redefine HTML Tag，Define選This Document Only，如圖。
此時彈出設定窗口，不管其它的，只在右邊的Size框裡選取12，單位為pixels。
2．定義選單連結樣式在樣式面板中，點選面板下方的按鈕，在彈出窗中，Type選第三項Use CSS Selector，Tag框內選取a:hover標籤，Define選This Document Only，如圖。
點選OK後在彈出窗中，Color填#ff9933，Decoration選none，點OK。
回到樣式面板，點選面板下方的按鈕，在彈出視窗中，Type選取第三項Use CSS Selector，Tag框內選取a:link標籤，Define選This Document Only。
點選OK後在彈出窗中，Color填#ffffff，Decoration選none，點OK。
又回到樣式面板，點選面板下面的按鈕，在彈出視窗中，Type選取第三項Use CSS Selector，Tag框內選取a:visited標籤，Define選This Document Only。
點選OK後在彈出窗中，Color填#ffffff，Decoration選none，點OK。
3．定義選單邊框樣式在樣式面板中，點選面板下方的按鈕，在彈出視窗中， Tag框內選取td標籤，Type選取第二項Redefine HTML Tag，Define選This Document Only，如圖。
彈出設定窗口，在左邊的列表中選Border，右邊四條邊寬度都輸入為1，顏色設為黑色#000000，Style選為solid。
到此，我們就大告成功了。趕快用到你的網頁上去吧。