作者:Poorfish
Dreamweaver是制作下拉菜單最常用的工具，方法簡單，控制自如。它能盡可能的創造菜單風格，是制作下拉菜單的必修課。
用Dreamweaver制作下拉菜單的原理很簡單。它使用行為面板中的內置方法Show-Hide Layers，並使用onMouseOver和onMouseOut來觸發層的隱藏和顯示，將出現的菜單就在層中。
所以，我們可以分四步做壹個下拉菜單。首先，我們需要壹個導航欄來放置首先出現在查看者面前的主菜單。然後做壹個隱藏時會出現的下拉菜單；然後，最關鍵的壹步是在主菜單和下拉菜單中加入隱藏和顯示圖層的效果；最後，我們美化菜單。妳也可以訪問以下地址:menu.htm。
相信妳已經等不及了，那就馬上開始吧！
壹、導航欄的制作
首先做壹些必要的前期工作，按CTRL+J打開頁面屬性窗口，參數設置如圖2所示。這個設置會影響菜單的位置，所以請按圖示設置。
按CTRL+F2打開對象面板，單擊圖層按鈕，在頁面中按住鼠標拖出壹個圖層，然後在圖層的屬性面板中設置各種參數，在圖層ID框中填寫標題，在L、T、W、H框中分別填寫8、15、480、15，並填寫背景色# 00699，如圖所示。
將光標移動到圖層，單擊“對象”面板上的“表格”按鈕，然後插入壹個壹行四列的表格，如圖所示。
按住CTRL鍵並單擊表格的四個單元格，然後將它們的寬度設置為120，並在前兩個單元格中輸入文本，這是您的主菜單的名稱。您可以輸入您想要的名稱。我以“經典論壇”和“天網”為例，並添加鏈接。
二、下拉菜單的制作
現在開始制作下拉菜單，也用圖層制作。
從Objects面板中插入壹個圖層到我們之前做的導航欄下部，填入參數如下:圖層ID框填入menu1，L，T，W，H框分別填入8，34，120，80，背景色填入# 99966，其中L和T兩個參數設置這個圖層與窗口的左上邊框的距離。
這時，我們可以在menu1的圖層中輸入我們想要的菜單內容。為了排版方便，我這裏還是用表格做菜單。這壹層會出現“經典論壇”的下拉菜單，填寫妳需要的菜單鏈接。同理，做壹個“天網”的下拉菜單(Layer menu2)。
這壹步需要註意的是，下拉菜單(menu1，menu2)所在圖層的位置很重要(由L和T兩個參數決定)。它們的上邊緣要靠近導航欄的下邊緣，這樣才能保證我們後面完成第三步後，菜單還能正常使用。因為如果妳遠離導航欄，鼠標壹離開導航欄菜單就消失了。
按F2打開圖層面板，該面板列出了網頁中的三個圖層。點擊menu1和menu2前面的方框，會出現閉眼圖標，這兩層是隱藏的。完成這壹步是因為下拉菜單的初始狀態是不可見的。
第三，顯示和隱藏添加的效果
這壹步是化腐朽為神奇的關鍵壹步。請仔細跟著我。
這壹步分為兩部分:首先在導航欄主菜單中添加壹個控制隱藏信息顯示的命令；第二，在下拉菜單本身添加壹個命令來顯示隱藏。
1.導航欄部分
首先，按CTRL鍵並單擊導航欄中的第壹個單元格。現在按Shift+F3打開行為窗口，單擊按鈕，並在下拉選項中選擇“顯示-隱藏層”(如圖所示)。如果此選項不可用，請在“顯示事件”下選擇IE 5.0，然後再次單擊按鈕。這時會出現“顯示-隱藏圖層”。
這時會彈出壹個窗口，如下圖。在命名圖層框中，將列出當前網頁的所有圖層，並選擇“layer”menu1”，因為我們希望menu 1的這壹層能夠響應“經典論壇”。然後點擊下面的“顯示”按鈕，確定。
此時，您將返回到“行為”窗口，下圖所示的單詞將出現在窗口中。單擊Events下的單詞“onClick ”,會出現壹個向下的小箭頭。點擊它，在下拉選項中選擇onMouseOver。這壹步的作用是實現當鼠標移動到第壹個單元格時，下拉菜單menu1的狀態變為Show。
下壹步是當鼠標移動到第二個單元格時，隱藏下拉菜單menu2。
再次點擊按鈕，在下拉選項中選擇“顯示-隱藏圖層”，在彈出窗口中選擇“圖層”menu1，因為我們想讓menu1的這壹層響應“經典論壇”。然後點擊下面的“隱藏”按鈕，確定。
返回到“行為”窗口，單擊向下箭頭，並在下拉選項中選擇onMouseOut。
2.下拉菜單部分
通過單擊層的邊緣或單擊“層”面板中的菜單1，首先選擇層菜單1，然後添加命令以在“行為”窗口中顯示和隱藏自己，方式與導航欄相同。這樣做的效果是，當鼠標移出層菜單1時，層菜單1會自動隱藏。最後壹層menu1的狀態如圖所示。
3.重復上面兩個部分，為導航欄第二個主菜單“天極網”和圖層菜單2添加顯示和隱藏圖層的命令。
第四，下拉菜單的美化
至此，下拉菜單的功能效果已經實現。現在按F12就可以看到了。但是妳壹定也發現菜單有點醜，文字不夠精細，菜單選項默認鏈接顏色不好看，菜單沒有邊框，還是稍微美化壹下吧。
1.定義菜單字體樣式
按Shift+F11打開“CSS樣式”面板，然後單擊面板下方的按鈕。
在彈出的“New Style”窗口的Tag框中選擇td Tag，Type選擇第二個Redefine HTML Tag，define選擇This Document Only，如圖。
這時會彈出設置窗口。不管別的，只要在右邊的尺寸框裏選擇12，單位是像素。
2.定義菜單鏈接樣式
在“樣式”面板中，單擊面板下方的按鈕。在彈出的窗口中，選擇第三項使用CSS選擇器作為類型，在標簽框中選擇a:hover標簽，選擇此文檔僅用於定義，如圖所示。
點擊確定，在彈出的窗口中，顏色填寫#ff9933，裝飾選擇無，點擊確定。
回到“樣式”面板，單擊面板下方的按鈕，在彈出窗口中，選擇第三個項目“使用CSS選擇器”作為“類型”，在“標記”框中選擇a:link標記，並選擇“此文檔僅用於定義”。
點擊確定，在彈出的窗口中，填入#ffffff作為顏色，選擇無作為裝飾，點擊確定。
返回到樣式面板，單擊面板下方的按鈕，在彈出窗口中，選擇第三個項目“使用CSS選擇器”作為“類型”，在“標記”框中選擇a:visited標記，並選擇“此文檔僅用於定義”。
點擊確定，在彈出的窗口中，填入#ffffff作為顏色，選擇無作為裝飾，點擊確定。
3.定義菜單邊框樣式
在樣式面板中，點擊面板下方的按鈕，在彈出的窗口中，在標簽框中選擇td標簽，在類型中選擇第二個Redefine HTML標簽，在定義中選擇本文檔，如圖。
彈出設置窗口，從左側列表中選擇邊框，輸入右側四邊寬度為1，顏色設置為黑色#000000，樣式選擇純色。
在這壹點上，我們成功了。快速使用妳的網頁。