下拉菜單是網上最常見到的效果之一，用鼠標輕輕一點或是移過去，就出現一個更加詳細的菜單，它不僅節省了網頁排版上的空間、使網頁佈局簡潔有序，而且一個新穎美觀的下拉菜單，更是爲您的網頁增色不少。
製作下拉菜單的方法多種多樣，本期專欄將爲您介紹四種常用的製作方法，讓您隨心打造自己的下拉菜單。
■ 用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。
到此，我們就大告成功了。趕快用到你的網頁上去吧。