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

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è)置第一級(jí)菜單的大小和寬度高度，以及文字居中5二級(jí)菜單欄設(shè)置邊框和背景顏色6當(dāng)鼠標(biāo)滑過的。

3、* 2 設(shè)置水平方向主菜單， 設(shè)置子菜單彈出位置相對(duì)于當(dāng)前父菜單項(xiàng) * li float left * 產(chǎn)生水平菜單 * position relative * position為非static時(shí)才能讓子菜單彈出位置相對(duì)當(dāng)前菜單項(xiàng) * width 10em * 給菜單項(xiàng)設(shè)置寬度 * * 3 設(shè)置二級(jí)菜單默認(rèn)為隱藏狀態(tài)， 設(shè)置彈出時(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、像這樣，一個(gè)菜單橫向菜單就建好了，下來我們給欄目一，欄目二，欄目三，添加二級(jí)下拉菜單 ltdiv class=quotnavquot ltul ltlilta href=quot#quot欄目一lta ltul ltlilta href=quot#quot二級(jí)欄目ltaltli ltlilta href=quot#quot二級(jí)欄目ltaltli ltlilta href=quot#quot二級(jí)欄目ltaltli lt。

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

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

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

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

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

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

12、選項(xiàng)2option #160option value=quotoption3quot選項(xiàng)3optionselect 這樣，當(dāng)用戶選擇一個(gè)選項(xiàng)并提交表單時(shí)，選中的選項(xiàng)值將作為名稱為 myDropdown 的參數(shù)傳遞給服務(wù)器以上是創(chuàng)建簡(jiǎn)單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è)置一個(gè)下拉列表菜單，ltoption設(shè)計(jì)下拉菜單下面的值來達(dá)成效果代碼源件lthtml lthead ltmeta。

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

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

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