一打開(kāi)Dreamweaver，點(diǎn)擊 文件新建 菜單，創(chuàng)建一個(gè)HTML文件，輸入網(wǎng)站導(dǎo)航欄文字，并選中輸入的文字，在下面的屬性欄鏈接處加一個(gè)空鏈接#然后保存該網(wǎng)頁(yè)文件二點(diǎn)擊 窗口行為 菜單，打開(kāi)行為面板三選中第一步。

框架好了，那么就該定義頁(yè)面的title，關(guān)鍵詞keyword，和描述description ltmeta charset=quotUTF8quot content=quottexthtmlquot。

現(xiàn)在我們?yōu)閚av添加樣式，首先去掉默認(rèn)的margin和padding，再去掉ltullt li標(biāo)簽的liststyle樣式和lta標(biāo)簽的默認(rèn)下劃線接下來(lái)再添e799bee5baa6e4b893e5b19e63加適當(dāng)?shù)臉邮礁鶕?jù)實(shí)際需要添加進(jìn)行美化，如一下樣。

html做鼠標(biāo)懸浮菜單上的選項(xiàng)能出現(xiàn)下拉菜單，CSS+JS做出此效果ltbody內(nèi)代碼為ltUL id=fm ltLIltA href=quot#quot一級(jí)菜單欄目ltA ltUL ltLIltA href=quot#quot一級(jí)菜單目錄ltAltLI ltLIltA href=quot#quot一。

二二級(jí)聯(lián)動(dòng)下拉菜單設(shè)置 例如下圖所示，在手機(jī)列輸入或選取蘋果，型號(hào)下拉里會(huì)顯示所有蘋果手機(jī)的所有型號(hào)，如果手機(jī)列輸入蘋果，在型號(hào)列下拉菜單顯示所有蘋果的型號(hào)如圖操作步驟步驟1設(shè)置數(shù)據(jù)源區(qū)域就是把手機(jī)。

用CSS控制的下拉菜單，在各個(gè)瀏覽器中表現(xiàn)的不夠完美，最佳的方法是使用jQuery來(lái)制作，代碼如下，加了一個(gè)緩動(dòng)的效果HTML部分ltdiv id=quotnavquot ltul ltlilta href=quot#quot菜單零ltaltli ltlilta href=quot#quot。

讓二級(jí)菜單變成一行，只需要在豎排的效果上，讓二級(jí)菜單都浮動(dòng)起來(lái)，這樣就在一行了下面是簡(jiǎn)單的代碼實(shí)現(xiàn)，僅供參考ltstyle* margin0px padding0pxli liststyle width100px height30px font。