如何使用HTML、css、js制作樹狀圖（下拉框）？首先，您需要打開計(jì)算機(jī)上的DW軟件，創(chuàng)建一個(gè)新的HTML頁面，然后將其保存在桌面上。接下來，我們需要在正文中添加div標(biāo)簽，并使用UL unorde

如何使用HTML、css、js制作樹狀圖（下拉框）？

首先，您需要打開計(jì)算機(jī)上的DW軟件，創(chuàng)建一個(gè)新的HTML頁面，然后將其保存在桌面上。

接下來，我們需要在正文中添加div標(biāo)簽，并使用UL unordered list和Li標(biāo)簽創(chuàng)建一級菜單欄。代碼和瀏覽器效果如下圖所示。

由于菜單欄通常是鏈接的，因此我們需要為每個(gè)Li標(biāo)簽添加一個(gè)標(biāo)簽，并添加適當(dāng)?shù)臉邮?。使鼠?biāo)移動到有明顯顏色變化的鏈接上。

到最后一步，我們的第一級菜單欄已經(jīng)制作完成。接下來，我們需要制作第二級菜單欄。我們在第一級菜單欄的Li標(biāo)簽下加上UL和第二級菜單欄的Li標(biāo)簽，然后再加上Li標(biāo)簽制作第二級菜單。

二級菜單的代碼和CSS樣式以及瀏覽器中的顯示效果如下圖所示。

如您所見，這是一個(gè)靜態(tài)輔助菜單。輔助菜單將始終顯示在網(wǎng)頁上。如何先隱藏它，然后在顯示它之前將鼠標(biāo)滑過主菜單？

實(shí)際上，我們只需要為二級菜單的UL標(biāo)簽設(shè)置顯示的none和block屬性。默認(rèn)情況下，secondary UL的display屬性設(shè)置為none，當(dāng)鼠標(biāo)懸停時(shí)display屬性設(shè)置為block。

這樣，二級菜單就完成了。如果我們想在其他主菜單下有一個(gè)輔助菜單，我們只需要復(fù)制相應(yīng)的代碼。

河南新華計(jì)算機(jī)學(xué)院網(wǎng)絡(luò)運(yùn)行協(xié)會為您解答