下面是我做的一個(gè)范例，你可以參考一下 lt！DOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quotDTDxhtml1transitionaldtdquot lthtml xmlns=quot；下拉菜單實(shí)現(xiàn)代碼如下ltHTML ltHEAD ltSCRIPT LANGUAGE=quotjavascriptquot ltSCRIPT ltSCRIPT LANGUAGE=quotjavascriptquot function Body_InitoSelect，oText var iLeft= oSelectoffsetLeftvar iTop = oSelectoffsetTopv；使用HTML和CSS制作下拉菜單的方法如下1編寫帶有div導(dǎo)航的html代碼2使用class=“nav”屬性的‘div’標(biāo)簽作為菜單的容器在截圖中，在圖示的HTML代碼中，一個(gè)簡(jiǎn)單的無序列表ul來表示主菜單項(xiàng)3在主菜單區(qū)域中；下圖是IE8瀏覽器下的效果整體代碼如下lt！DOCTYPE htmllthtmlltheadltmeta charset=quotutf8quot ltstyleselect_diy border2px solid #c1c1c1 borderbottomcolor#d0d0d0borderradius5px padding8px；1首先我們打開html開發(fā)工具，新建一個(gè)html代碼頁面2在html代碼頁面上創(chuàng)建一個(gè)select下拉菜單3保存html代碼頁面，使用瀏覽器打開，這個(gè)時(shí)候我們發(fā)現(xiàn)select下拉菜單是可以點(diǎn)擊修改的4回到html代碼頁面，在select標(biāo)簽上；如圖所示，二級(jí)下拉菜單一般都是這樣來制作的，就是在li標(biāo)簽里面再放一個(gè)ul標(biāo)簽然后就會(huì)有這樣的效果了，不過距離二級(jí)菜單有點(diǎn)差距接著我們先把二級(jí)下拉菜單之間的margin和padding值去掉然后設(shè)置divulli，需要注意的是；超級(jí)文本標(biāo)記語言英文縮寫HTML是為“網(wǎng)頁創(chuàng)建和其它可在網(wǎng)頁瀏覽器中看到的信息”設(shè)計(jì)的一種標(biāo)記語言網(wǎng)頁的本質(zhì)就是超級(jí)文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)如腳本語言公共網(wǎng)關(guān)接口組件等，可以創(chuàng)造出；1創(chuàng)建CSS菜單的HTML代碼框架我們使用class=“nav”屬性的‘div’標(biāo)簽作為菜單的容器在截圖中，在圖示的HTML代碼中，一個(gè)簡(jiǎn)單的無序列表ul來表示主菜單項(xiàng)2在主菜單區(qū)域中添加鏈接在本步驟中，在無序列表；ltselect定義為下拉列表菜單標(biāo)簽 ltOption定義下拉列表數(shù)據(jù)標(biāo)簽 ltValue 定義傳輸?shù)亩?實(shí)現(xiàn)原理通過代碼ltselect設(shè)置一個(gè)下拉列表菜單，ltoption設(shè)計(jì)下拉菜單下面的值來達(dá)成效果代碼源件lthtml lthead ltmeta。

先把導(dǎo)航條做出來，然后在每個(gè)想有下拉列表的欄目下，畫出來下拉的選項(xiàng)，格式一般為 ltdivltulltlilta1ltaltliltlilta2ltaltliltulltdiv，然后調(diào)好樣式并將div的style設(shè)置，display= 然后獲取；select標(biāo)簽可以創(chuàng)建下拉列表，列入 ltselect ltoption value=quot1quot我是下拉項(xiàng)目1ltoption ltoption value=quot2quot我是下拉項(xiàng)目2ltoption ltoption value=quot3quot我是下拉項(xiàng)目3ltoption ltoption value=quot4quot我。

2lta lta href=quot#quot下拉 3lta ltdiv ltli ltul ltscript src=quotscriptjsquotltscript ltbodylthtml CSS stylecssbody fontfamily quotLucida Sans Unicodequot， quotLucid；示例代碼如下lt！DOCTYPE HTMLlthtmllthead ltmeta；如果想僅用CSS實(shí)現(xiàn)的話，可以考慮把菜單標(biāo)題和菜單內(nèi)容放到同一個(gè)容器下，然后給這個(gè)容器做hover樣式，具體請(qǐng)參閱下面示例代碼HTMLlt！DOCTYPE htmllthtmllthead ltmeta charset=#39utf8#39ltheadltbody ltdiv。

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