網絡上的各種網頁,二級下拉菜單非常常見,那麼HTML中怎樣製作二級下拉菜單呢?
操作方法
（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）附上源代碼哦！<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>*{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;}</style></head><body><div id="icon"><p>頭像</p><ul><li>個人中心</li><li>我的收入</li><li>消息</li><li>退出登錄</li></ul></div></body><script>var icon=lementById("icon");var oul=lementsByTagName("ul")[0];useover=function(){lay="block";}useout=function(){lay="none";}</script></html>
