shangkeitcomquot target=quot_blankquot二級導(dǎo)航4lta ltli ltul ltli ltul ltdivltbodylthtml復(fù)制上面代碼，保存到后綴為html或者h(yuǎn)tm的文件中，用瀏覽器打開就可以看到效果效果圖如下。

一般出現(xiàn)這種情況，往往是這個(gè)寬度的問題寬度沒有寫死，正常的時(shí)候的一級菜單的寬度和hover狀態(tài)下一級菜單的寬度不同，所以會(huì)掉下來下面有一個(gè)二級菜單的demo，可以對照著找一下 lt！DOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quotDTDxhtml。

要實(shí)現(xiàn)這個(gè)功能其實(shí)非常簡單，下面的思路希望對你有用步驟如下一般WEB開發(fā)把頁面分成3個(gè)模塊headertpl contenttpl footertplhead和footer一般都是固定不變的，唯一變化的部分是content你說的菜單應(yīng)該是header部分的導(dǎo)航部分例如主頁的代碼可以這樣寫lthtml ltheadlthead ltbody。

這個(gè)說來話來，但只要你知道原理就很簡單了，做得好不好看是樣式的問題了請看如下調(diào)用jquery的j顯示子菜單的代碼quot#menu_2quothoverfunction quotsub_menu_2quotshow，function *這里就是out事件* quotsub_menu_2quothide剩下的就是樣式的問題了。

1首先打開Dreamweaver，創(chuàng)建html文件2其次先給頁面設(shè)置背景顏色，創(chuàng)建段落兩個(gè)段落，段落上面設(shè)置2張圖片的float屬性，分別讓它們左右浮動(dòng)，值為left和right，打開瀏覽器3最后打開瀏覽器后即可看到效果，兩張圖片分別浮動(dòng)在文本的兩邊，文字則是圍繞在圖片周圍。

如圖所示，二級下拉菜單一般都是這樣來制作的，就是在li標(biāo)簽里面再放一個(gè)ul標(biāo)簽然后就會(huì)有這樣的效果了，不過距離二級菜單有點(diǎn)差距接著我們先把二級下拉菜單之間的margin和padding值去掉然后設(shè)置divulli，需要注意的是，是子代選擇器因?yàn)槲覀儾恍枰康膌i左浮動(dòng)如圖，浮動(dòng)后就成了，距離二級菜單。