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

2、1首先打開sublime編譯器，然后創(chuàng)建后綴名為html的文件，并寫入基本網(wǎng)頁結(jié)構(gòu)2在div容器中寫入最基本的菜單結(jié)構(gòu)，使用列表進(jìn)行構(gòu)建3將列表添加class屬性，并使用CSS屬性去掉列表和a標(biāo)簽的樣式4設(shè)置第一級菜單的大小和寬度高度，以及文字居中5二級菜單欄設(shè)置邊框和背景顏色6當(dāng)鼠標(biāo)滑過的。

3、* 2 設(shè)置水平方向主菜單， 設(shè)置子菜單彈出位置相對于當(dāng)前父菜單項(xiàng) * li float left * 產(chǎn)生水平菜單 * position relative * position為非static時才能讓子菜單彈出位置相對當(dāng)前菜單項(xiàng) * width 10em * 給菜單項(xiàng)設(shè)置寬度 * * 3 設(shè)置二級菜單默認(rèn)為隱藏狀態(tài)， 設(shè)置彈出時。

4、現(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 margin0 padding0 ul， li liststyle a textdecorationno。

5、像這樣，一個菜單橫向菜單就建好了，下來我們給欄目一，欄目二，欄目三，添加二級下拉菜單 ltdiv class=quotnavquot ltul ltlilta href=quot#quot欄目一lta ltul ltlilta href=quot#quot二級欄目ltaltli ltlilta href=quot#quot二級欄目ltaltli ltlilta href=quot#quot二級欄目ltaltli lt。

6、ltli class=quotnavliquot一級菜單項(xiàng) ltdiv class=quotboxquot二級菜單項(xiàng)ltdiv ltli ltul 接著，我們使用jQuery來編寫JavaScript代碼，實(shí)現(xiàn)菜單的延遲下拉效果以下是JavaScript代碼function #39navli#39hoverfunction thischildren#39divbox#39stoptrue，truedelay1000slideDown。

7、首先需要打開自己電腦上的DW軟件，新建一個html頁面，然后將其保存在桌面上接下來我們需要在body里面添加DIV標(biāo)簽，并在其內(nèi)使用ul無序列表和li標(biāo)簽制作一個一級菜單欄，代碼和瀏覽器的效果如下面兩張圖片所示因?yàn)椴藛螜谝话愣际怯墟溄拥模覀兙托枰獮槊總€li標(biāo)簽添加一個a標(biāo)簽，并增加適當(dāng)?shù)臉邮健?/p>

8、設(shè)置二級菜單的zindex屬性，在style下面的 zindex 屬性設(shè)置元素的堆疊順序擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面注釋元素可擁有負(fù)的 zindex 屬性值注釋Zindex 僅能在定位元素上奏效例如 positionabsolute。

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

10、看到網(wǎng)站的導(dǎo)航按鈕很炫酷不會怎么辦本片教程介紹如何使用css制作網(wǎng)站導(dǎo)航橫排二級下拉菜單 打開Notepad++，先輸入個頁面框架 DOCTYPE html html xmlns=#34#34 hade hade body body 框架好了，那么就該定義頁面的title，關(guān)鍵詞keyword，和描述description meta。

11、在這里給你看下我以前的寫的一個代碼 lt！DOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quotDTDxhtml1transitionaldtdquot lthtml xmlns=quot lthead lttitle簡潔實(shí)用的二級下拉導(dǎo)航菜單lttitle ltmeta。

12、選項(xiàng)2option #160option value=quotoption3quot選項(xiàng)3optionselect 這樣，當(dāng)用戶選擇一個選項(xiàng)并提交表單時，選中的選項(xiàng)值將作為名稱為 myDropdown 的參數(shù)傳遞給服務(wù)器以上是創(chuàng)建簡單HTML下拉菜單的基本步驟您可以根據(jù)需要自定義下拉菜單的樣式和行為，例如添加CSS樣式或JavaScript事件處理程序。

13、下拉菜單實(shí)現(xiàn)代碼如下ltHTML ltHEAD ltSCRIPT LANGUAGE=quotjavascriptquot ltSCRIPT ltSCRIPT LANGUAGE=quotjavascriptquot function Body_InitoSelect，oText var iLeft= oSelectoffsetLeftvar iTop = oSelectoffsetTopvar iWidth=oSelectclientWidthvar iHeight=oSelectclientHeight。

14、實(shí)現(xiàn)原理通過代碼ltselect設(shè)置一個下拉列表菜單，ltoption設(shè)計(jì)下拉菜單下面的值來達(dá)成效果代碼源件lthtml lthead ltmeta。

15、quot#main_menu li，#main_menu ddquotbindquotmouseoverquot， function 頂級菜單項(xiàng)的鼠標(biāo)移入操作 thischildrenquotdlquotsiblingsquotaquotattrquotclassquot， quothover_aquot 賦于一級菜單類名 thischildrenquotdlquotstoptrue， trueslideDownquot100quot 下拉二級菜單 bindquot。

16、使用HTML和CSS制作下拉菜單的方法如下1編寫帶有div導(dǎo)航的html代碼2使用class=“nav”屬性的‘div’標(biāo)簽作為菜單的容器在截圖中，在圖示的HTML代碼中，一個簡單的無序列表ul來表示主菜單項(xiàng)3在主菜單區(qū)域中添加鏈接在本步驟中，在無序列表ul每一項(xiàng)上添加鏈接4在“關(guān)于我們。

17、答案使用HTML和CSS可以制作下拉菜單下面是一個簡單的制作步驟詳細(xì)解釋1 HTML結(jié)構(gòu) 首先，我們需要創(chuàng)建HTML的基礎(chǔ)結(jié)構(gòu)對于下拉菜單，通常使用``和``標(biāo)簽來定義選項(xiàng)例如html 選項(xiàng)1 選項(xiàng)2 選項(xiàng)3 這里的`id`屬性對于后續(xù)CSS樣式化很重要2 CSS樣式化 接下來，通過CSS對下拉菜單進(jìn)行樣式化。