HTML怎樣製作二級下拉選單
網路上的各種網頁,二級下拉選單非常常見,那麼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>
