使用HTMl+CSS製作二級選單或二級導航欄
阿新 • • 發佈：2022-01-05
HTML、CSS製作網頁二級選單、二級導航條
二級選單的實現思路為：1.在預設狀態下，使用display:none;將二級選單隱藏。 2.當一級選單中的列表標籤li獲取焦點(hover)後，使用display:blick;將二級選單顯示出來。 3.使用position: relative;和position: absolute;分別得一級選單和二級選單設定相對定位和絕對定位。
本內容面向小白向，我在程式碼中加了詳細的註釋，解釋了語句的作用。
二級選單展開後 效果如下(沒有美化，見諒)：
HTMl程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>二級選單</title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body> <div class="menu"> <ul> <li>首頁</li> <li>部落格 <ul> <li>部落格1</li> <li>部落格2</li> <li>部落格3</li> </ul> </li> <!-- 注意：需要將二級選單的ul放在一級選單的li標籤內 --><li>新聞</li> <li>賬戶</li> </ul> </div> </body> </html>
CSS程式碼如下：
ul li{ list-style: none; /* 清除列表原有樣式 */ } .menu{ width: 600px; height: 60px; background-color: aquamarine; } .menu ul li{ float: left; /* 使列表(一級選單)橫向 */ margin-right: 50px; margin-top: 20px; /* 設定一級選單內容的位置 */ position: relative; } .menu ul li ul{ width: 100px; height: 160px; margin-left: -50px; background-color: #7FFFD4; display: none; /* 設定初始為不顯示 */ position: absolute; } .menu ul li:hover ul{ display: block; /* 當一級選單的li獲取hover後將二級選單的ul顯示出來 */ }
原創內容，轉載請註明出處！！！