網絡上的各種網頁,二級下拉菜單非常常見,那么HTML中怎樣制作二級下拉菜單呢?工具/材料

hbuilder

操作方法

01

如圖,先書寫一個div標簽,并且給這個div標簽添加一個id。

02

然后在div里面嵌套一個p標簽，p標簽里面放置了一個主菜單“頭像”。我們要做的效果就是當鼠標放在“頭像”這里就會彈出下拉菜單。

03

然后我們使用*清除所有元素的margin和padding值。

04

接著我們來設置id為icon的div的樣式，這里只設置寬度，高度就靠里面的下拉菜單的內容來撐開這個div的高度。

這里我就使用line-height和text-align來讓文字上下左右居中，并且我還設置了border邊框。

05

最后，二級菜單的主菜單做出來了。

06

接著再在之前的div標簽里面嵌套ul，ul里面放置li，li里面就是我們二級下拉菜單的內容。

07

接著來預覽一下效果，可以看到二級下拉菜單的左邊有一些小圓點。

08

然后我們設置li標簽的CSS樣式為:list-style-type:none;

09

這樣小圓點就會去掉，不會影響下拉菜單的美觀程度。

10

我們常見的下拉菜單剛開始是看不見的，只有當鼠標放上去的時候才可以看見，所以我們要把下拉菜單先隱藏起來，這就需要設置ul的display屬性為none。

11

接著書寫JavaScript，獲取到二級菜單所在的div，以及下拉菜單所在的ul。

12

如圖，我們設置當鼠標經過icon這個div時，ul的屬性變為可見狀態。

13

而當鼠標離開的時候，ul就會隱藏起來，變成不可見狀態，這樣我們的二級下拉菜單就完成了。

14

附上源代碼哦！

*{

margin: 0;

padding: 0;

}

#icon{

width: 100px;

line-height: 30px;

text-align: center;

border: 1px solid black;

margin: 100px;

}

li{

list-style-type: none;

}

ul{

display: none;

}

頭像

• 個人中心
• 我的收入
• 消息
• 退出登錄

var icon=document.getElementById("icon");

var oul=document.getElementsByTagName("ul")[0];

icon.οnmοuseοver=function(){

oul.style.display="block";

}

icon.οnmοuseοut=function(){

oul.style.display="none";

}

總結

以上是生活随笔為你收集整理的html怎样 做二级菜单,HTML制作二级下拉菜单的方法步骤的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。